Selektory


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órZnaczenieOpisCSS
*każdy elementSelektor uniwersalny2
Eelement E (element typu E)Selektor typu1
E Felement F, który jest potomkiem elementu ESelektor potomka1
E > Felement F, który jest dzieckiem elementu ESelektor dziecka2
E + Felement F bezpośrednio poprzedzany przez element ESelektor braci2
E ~ Felement F poprzedzany przez element EOgólny selektor braci3

Selektory atrybutów

WzórZnaczenieOpisCSS
E[atr]element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość)Prosty selektor atrybutu2
E[atr="wart"]element E, którego atrybut "atr" ma wartość dokładnie "wart"Selektor atrybutu o określonej wartości2
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 wyraz2
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 łączniki2
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 tekst3

Selektory specjalne

WzórZnaczenieOpisCSS
DIV.wartTylko HTML. To samo co DIV[class~="wart"]Klasy selektorów1
E#identelement E z identyfikatorem ID równym "ident"Selektor identyfikatora1

Selektory pseudoelementów

WzórZnaczenieOpisCSS
P:first-linepierwsza linijka akapitu PPierwsza linia1
P:first-letterpierwsza litera akapitu PPierwsza litera1
E:beforewstawia treść przed zawartością elementu EPrzed...2
E:afterwstawia treść po zawartości elementu EPo...2

Selektory pseudoklas

WzórZnaczenieOpisCSS
E:rootelement E, który jest korzeniem dokumentuKorzeń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ńcaPseudoklasy cykliczne3
E:first-childelement E, który jest pierwszym dzieckiem jego rodzicaPierwsze dziecko2
E:last-childelement E, który jest ostatnim dzieckiem jego rodzicaOstatnie dziecko3
E:only-childelement E, który jest jedynym dzieckiem jego rodzicaJedyne dziecko3
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 EPseudoklasy typu3
E:emptyelement E, który nie ma dzieci ani nie zawiera tekstuPusty element3
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:targetelement E, który jest etykieta adresu dokumentuEtykieta3
E:lang(c)element typu E, który jest napisany w języku c (np.: pl - polski, en - angielski)Atrybut języka2
E:enabled
E:disabled
element E (interfejsu użytkownika), który jest odblokowany bądź zablokowanyBlokada3
E:checkedelement E (interfejsu użytkownika), który jest zaznaczony (np. pole wyboru lub opcji)Zaznaczenie3
E:not(s)element E, którego nie kojarzy prosty selektor sNegacja3