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".
| Wzór | Znaczenie | Opis |
|---|---|---|
| Selektory elementów | ||
* |
Kojarzy każdy element. | Selektor uniwersalny |
E |
Kojarzy każdy element E (element typu E). | Selektor typu |
E F |
Kojarzy każdy element F, który jest potomkiem elementu E. | Selektor potomka |
E > F |
Kojarzy każdy element F, który jest dzieckiem elementu E. | Selektor dziecka |
E + F |
Kojarzy każdy element F bezpośrednio poprzedzany przez element E. | Selektor braci |
| Selektory atrybutów | ||
E[atr] |
Kojarzy każdy element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość). | Prosty selektor atrybutu |
E[atr="wart"] |
Kojarzy każdy element E, którego atrybut "atr" ma wartość dokładnie "wart". | Selektor atrybutu o określonej wartości |
E[atr~="wart"] |
Kojarzy każdy 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 |
E[lang|="en"] |
Kojarzy każdy 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 |
| Selektory specjalne | ||
DIV.wart |
Tylko HTML. To samo co DIV[class~="wart"]. |
Klasy selektorów |
E#ident |
Kojarzy każdy element E z identyfikatorem ID równym "ident". | Selektor identyfikatora |
| Selektory pseudoelementów | ||
P:first-line |
Kojarzy pierwszą linię akapitu P. | Pierwsza linia |
P:first-letter |
Kojarzy pierwszą literę akapitu P. | Pierwsza litera |
E:before |
Wstawia treść przed zawartością elementu E. | Przed... |
E:after |
Wstawia treść po zawartości elementu E. | Po... |
| Selektory pseudoklas | ||
E:first-child |
Kojarzy element E, jeśli E jest pierwszym dzieckiem jego rodzica. | Pierwsze dziecko |
E:linkE:visited |
Kojarzy element E, jeżeli E 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 |
E:activeE:hoverE:focus |
Kojarzy E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie). |
Aktywacja Wskazanie myszką Zogniskowanie |
E:lang(c) |
Kojarzy element typu E, jeżeli jest napisany w języku c (np.: pl - polski, en - angielski). | Atrybut języka |
Źródło: Cascading Style Sheets, Level 2