Selektory CSS

Wstęp

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.

Źródło: Cascading Style Sheets, Level 2, Selectors Level 3

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