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-typeE:last-of-typeE: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:linkE: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:activeE:hoverE: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:enabledE: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 |