tanie strony www bydgoszcz tanie strony www bydgoszcz tanie strony www bydgoszcz
Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz
www.at.bydgoszcz.pl
Magia selektorów CSS - kto jest kim w rodzinie elementów html?

Magia selektorów CSS - czyli kto jest kim w "rodzinie" elementów html?

Jeśli chce się zmienić wygląd jakiegoś elementu HTML, trzeba wskazać - którego. Do tego właśnie służą selektory.

Jest wiele różnych selektorów, można stosować ich kombinacje - wszystko po to, aby dało się wybrać odpowiednie elementy i nie trzeba było powtarzać reguł ostylowania dla każdego elementu z osobna.

Selektory elementów
* każdy element Selektor uniwersalny
A element A (element typu A) Selektor typu
A B element B, który jest potomkiem elementu A Selektor potomka
A > B element B, który jest dzieckiem elementu A Selektor dziecka
A + B element B bezpośrednio poprzedzany przez element A Selektor braci
A ~ B element B poprzedzany przez element A Ogólny selektor braci

 

Selektory specjalne
DIV.klasa tak samo jak DIV[class~="klasa"] Klasy selektorów
A#identyfikator element A z identyfikatorem ID równym "identyfikator" Selektor identyfikatora

 

Selektory atrybutów
A[atr] element A z ustawionym atrybutem "atr" (na jakąkolwiek wartość) Prosty selektor atrybutu
A[atr="wart"] element A, którego atrybut "atr" ma wartość dokładnie "wart" Selektor atrybutu o określonej wartości
A[atr~="wart"] element A, którego wartość atrybutu "atr" jest listą oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość "wart" Selektor atrybutu zawierającego określony wyraz
A[lang|="en"] element A, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en" Selektor atrybutu zawierającego łączniki 
A[atr^="wart"] element A, którego wartość atrybutu "atr" rozpoczyna się dokładnie od "wart" Selektor atrybutu o wartości rozpoczynającej się od...
A[atr$="wart"] element A, którego wartość atrybutu "atr" kończy się dokładnie dokładnie na "wart" Selektor atrybutu o wartości kończącej się na...
A[atr*="wart"] element A, którego wartość atrybutu "atr" zawiera "wart" Selektor atrybutu zawierającego określony tekst

 

Selektory pseudoelementów
P:first-line pierwsza linijka akapitu P Pierwsza linia
P:first-letter pierwsza litera akapitu P Pierwsza litera
A:before wstawia treść przed zawartością elementu A Przed...
A:after wstawia treść po zawartości elementu A Po...

 

Selektory pseudoklas
A:root element A, który jest korzeniem dokumentu Korzeń
A:nth-child(n)
A:nth-last-child(n)
A:nth-of-type(n)
A:nth-last-of-type(n)
element A, który jest odpowiednio:
n-tym dzieckiem jego rodzica, n-tym dzieckiem licząc od końca, n-tym bratem typu E, n-tym bratem typu E licząc od końca
Pseudoklasy cykliczne
A:first-child element A, który jest pierwszym dzieckiem jego rodzica Pierwsze dziecko
A:last-child element A, który jest ostatnim dzieckiem jego rodzica Ostatnie dziecko
A:only-child element A, który jest jedynym dzieckiem jego rodzica Jedyne dziecko
A:first-of-type
A:last-of-type
A:only-of-type
element A, który jest odpowiednio: pierwszym, ostatnim bądź jedynym bratem typu A Pseudoklasy typu
A:empty element A, który nie ma dzieci ani nie zawiera tekstu Pusty element
A:link
A:visited
element A, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) Odsyłacz podstawowy
Odsyłacz odwiedzony
A:active
A:hover
A:focus
element A podczas pewnych akcji użytkownika
(:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie)
Aktywacja
Wskazanie myszką
Zogniskowanie
A:target element A, który jest etykietą adresu dokumentu  Etykieta
A:lang(c) element typu A, który jest napisany w języku c (np.: pl - polski, en - angielski) Atrybut języka
A:enabled
A:disabled
element A (interfejsu użytkownika), który jest odblokowany bądź zablokowany Blokada
A:checked element A (interfejsu użytkownika), który jest zaznaczony (np. polewyboru lub opcji) Zaznaczenie
A:not(s) element A, którego nie kojarzy prosty selektor s Negacja

 

 ↻ do góry  « powrót 
Copyright © 2017-2019 www.at.bydgoszcz.pl

Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz

Strony Internetowe    Pytania i odpowiedzi    Szablony tanich stron    Zamów stronę WWW
projekty stron strony internetowe bydgoszcz
g+