Selektory w CSS3

Selektory proste

Selektor uniwersalny

Selektor	Opis
*	Pasuje do każdego elementu.

Selektor typu

Selektor	Opis
E	Pasuje do każdego elementu  typu E .

Selektory atrybutu

Selektor	Opis
E[foo]	Pasuje do elementu E, którego atrybut "foo" ma jakąkolwiek wartość.
E[foo="war"]	Pasuje do elementu E, którego atrybut "foo" ma dokładnie wartość "war".
E[foo~="war"]	Pasuje do elementu E, którego atrybut "foo" wartość "war".
E[lang|="en"]	Pasuje do elementu E, którego atrybut "lang" ma wartość "en".
E[f^="b"]	Pasuje do elementu E, którego atrybut f zaczyna się od wartości “b”.*
E[foo$="bar"]	Pasuje do elementu E, którego atrybut foo kończy się wartością “bar”.*
E[foo*="bar"]	Pasuje do elementu E, którego atrybut foo zawiera wartość “bar”.*

Selektory klas

Selektor	Opis
[E].warning	Element E jest w class="warning".

Selektory identyfikatorów

Selektor	Opis
[E]#myid	Elementu E ma id="myid".

Uwaga: Do grupowania selektorów używamy przecinka.

pseudoklasY

Selektor	Opis
E:first-child	Pasuje do elementu E, który jest pierwszym dzieckiem swojego rodzica.
E:link E:visited	Pasuje do elementu E, jeśli E jest hiperłączem, którego cel nie został jeszcze odwiedzony lub został już odwiedzony.
E:active E:hover E:focus	Pasuje do E, podczas gdy użytkownik wykonuje określone czynności.
E:lang(c)	Pasuje do elementu typu E, jeśli element ten jest w języku c .
E:root	Pasuje do korzenia dokumentu. W przypadku HTML, korzeniem jest element HTML.*
E:nth-child(n)	Pasuje do elementu E, który jest n-tym dzieckiem swojego rodzica.*
E:nth-last-child(n)	Pasuje do elementu E, który jest n-tym dzieckiem swojego rodzica, licząc od ostatniego dziecka.*
E:nth-of-type(n)	Pasuje do elementu E, który jest n-tym rodzeństwem swojego typu.*
E:nth-last-of-type(n)	Pasuje do elementu E, który jest n-tym rodzeństwem swojego typu, licząc od ostatniego rodzeństwa.*
E:last-child	Pasuje do elementu E, który jest ostatnim dzieckiem swojego rodzica.*
E:first-of-type	Pasuje do elementu E, który pierwszym rodzeństwem swojego typu.*
E:last-of-type	Pasuje do elementu E, który ostatnim rodzeństwem swojego typu.*
E:only-child	Pasuje do elementu E, który jest jedynym dzieckiem swojego rodzica.*
E:only-of-type	Pasuje do elementu E, który jest jedynym rodzeństwem swojego typu.*
E:empty	Pasuje do elementu E, który nie ma dzieci, w tym tekstu.*
E:target	Pasuje do elementu E, który jest celem danego adresu URL.*
E:enabled	Pasuje do elementu E interfejsu użytkownika, który jest dostępny.*
E:disabled	Pasuje do elementu E interfejsu użytkownika, który jest niedostępny.*
E:checked	Pasuje do elementu E interfejsu użytkownika, który jest zaznaczony.*
E:not(s)	Pasuje do elementu E, który nie pasuje do selektora prostego s.*

Pseudoelementy

Pseudoelementy

Selektor	Opis
E::first-line	Pierwsza formatowana linia elementu E
E::first-letter	Pierwszy formatowany znak elementu E
E::before	Zawartość tworzona przed elementem E
E::after	Zawartość tworzona po elemencie E

Uwaga: Zapis "::" został wprowadzony w CSS3. Notację ":" można spotkać w starszych kodach stron.

Kombinatory

Kombinator wyboru potomka

Selektor	Opis
E F	Pasuje do każdego elementu F będącego potomkiem elementu E.

Kombinatory wyboru elementów dzieci

Selektor	Opis
E>F	Pasuje do każdego elementu F będącego dzieckiem elementu E.

Kombinatory wyboru elementów siostrzanych

Selektor	Opis
E + F	Pasuje do elementu F, bezpośrednio przed którym znajduje się element E.
E ~ F	Pasuje do dowolnego elementu F, który jest poprzedzony elementem E.*