foto1
foto1
foto1
foto1
foto1
1
1

Poniżej znajdziesz skrócony opis wszystkich rodzajów selektorów CSS. Dokładniej na ich temat możesz przeczytać klikając odnośnik w kolumnie "Opis". Natomiast kolumna "CSS" zawiera poziom specyfikacji języka, w którym po raz pierwszy selektor został wprowadzony.

 

 

Selektory elementów

Wzór Znaczenie Opis CSS
* każdy element Selektor uniwersalny 2
E element E (element typu E) Selektor typu 1
E F element F, który jest potomkiem elementu E Selektor potomka 1
E > F element F, który jest dzieckiem elementu E Selektor dziecka 2
E + F element F bezpośrednio poprzedzany przez element E Selektor braci 2
E ~ F element F poprzedzany przez element E Ogólny selektor braci 3

Selektory atrybutów

Wzór Znaczenie Opis CSS
E[atr] element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość) Prosty selektor atrybutu 2
E[atr="wart"] element E, którego atrybut "atr" ma wartość dokładnie "wart" Selektor atrybutu o określonej wartości 2
E[atr~="wart"] element E, 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 2
E[lang|="en"] element E, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en" Selektor atrybutu zawierającego łączniki 2
E[atr^="wart"] element E, którego wartość atrybutu "atr" rozpoczyna się dokładnie od "wart" Selektor atrybutu o wartości rozpoczynającej się od... 3
E[atr$="wart"] element E, którego wartość atrybutu "atr" kończy się dokładnie dokładnie na "wart" Selektor atrybutu o wartości kończącej się na... 3
E[atr*="wart"] element E, którego wartość atrybutu "atr" zawiera "wart" Selektor atrybutu zawierającego określony tekst 3

Selektory specjalne

Wzór Znaczenie Opis CSS
DIV.wart Tylko HTML. To samo co DIV[class~="wart"] Klasy selektorów 1
E#ident element E z identyfikatorem ID równym "ident" Selektor identyfikatora 1

Selektory pseudoelementów

Wzór Znaczenie Opis CSS
P:first-line pierwsza linijka akapitu P Pierwsza linia 1
P:first-letter pierwsza litera akapitu P Pierwsza litera 1
E:before wstawia treść przed zawartością elementu E Przed... 2
E:after wstawia treść po zawartości elementu E Po... 2

Selektory pseudoklas

Wzór Znaczenie Opis CSS
E:root element E, który jest korzeniem dokumentu Korzeń 3
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
element E, 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 3
E:first-child element E, który jest pierwszym dzieckiem jego rodzica Pierwsze dziecko 2
E:last-child element E, który jest ostatnim dzieckiem jego rodzica Ostatnie dziecko 3
E:only-child element E, który jest jedynym dzieckiem jego rodzica Jedyne dziecko 3
E:first-of-type
E:last-of-type
E:only-of-type
element E, który jest odpowiednio: pierwszym, ostatnim bądź jedynym bratem typu E Pseudoklasy typu 3
E:empty element E, który nie ma dzieci ani nie zawiera tekstu Pusty element 3
E:link
E:visited
element E, 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
1
E:active
E:hover
E:focus
element E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie) Aktywacja

Wskazanie myszką

Zogniskowanie
1
E:target element E, który jest etykieta adresu dokumentu Etykieta 3
E:lang(c) element typu E, który jest napisany w języku c (np.: pl - polski, en - angielski) Atrybut języka 2
E:enabled
E:disabled
element E (interfejsu użytkownika), który jest odblokowany bądź zablokowany Blokada 3
E:checked element E (interfejsu użytkownika), który jest zaznaczony (np. pole wyboru lub opcji) Zaznaczenie 3
E:not(s) element E, którego nie kojarzy prosty selektor s Negacja 3