Selektory

selektory elementów
selektory atrybutów
selektory klasy
selektory identyfikatora
selektory pseudo klas (pseudo_klasy)
selektory pseudo elementów (pseudo elementy)

Selektory elementów

selektor	przykład
selektor uniwersalny	* { właściwość: wartość }
selektor typu	selektor { właściwość: wartość }
grupa selektorów	selektor1, selektor2 ... { właściwość: wartość }
selektor potomka	przodek potomek { właściwość: wartość }
selektor dziecka	rodzic > dziecko { właściwość: wartość }
selektor braci	brat1 + brat2 { właściwość: wartość }
ogólny selektor braci	brat1 ~ brat2 { właściwość: wartość }

Selektory atrybutów

selektor	przykład
selektor atrybutu	selektor[atrybut] { cecha: wartość }
selektor atrybutu o konkretnej wartości	selektor[atrybut="wartość atrybutu"] { właściwość: wartość }
selektor atrybutu o wartości rozpoczynającej się od...	selektor[atrybut^="początek"] { właściwość: wartość }
selektor atrybutu o wartości kończącej się na...	selektor[atrybut$="koniec"] { właściwość: wartość }
selektor atrybutu zawierającego konkretny tekst	selektor[atrybut*="tekst"] { właściwość: wartość }
łączenie selektorów atrybutów	p[class][dir="ltr"][title~="akapit"][lang|="pl"] { color: red }

Selektory klasy

selektor	przykład
uniwersalny selektor klasy	.nazwa_klasy { właściwość: wartość }
uniwersalny selektor klasy	*.nazwa_klasy { właściwość: wartość }
konkretny selektor klasy	selektor.nazwa_klasy { właściwość: wartość }

Selektory identyfikatora

selektor	przykład
uniwersalny selektor identyfikatora	#nazwa_identyfikatora { właściwość: wartość }
uniwersalny selektor identyfikatora	*#nazwa_identyfikatora { właściwość: wartość }
konkretny selektor identyfikatora	selektor#nazwa_identyfikatora { właściwość: wartość }

Selektory pseudo klas (pseudo klasy)

składnia:
selector:pseudo-class { property: value; }
selektor:pseudo-klasa { właściwość: wartość; }

selektor	przykład	opis
:active	a:active div:active p:active	Naciśnięcie lewego przycisku myszki nad elementem <a> powoduje aktywacje określonego efektu. Naciśnięcie lewego przycisku myszki nad elementem <div> powoduje aktywacje określonego efektu. Naciśnięcie lewego przycisku myszki nad elementem <p> powoduje aktywacje określonego efektu.
:checked	input:checked	Wybiera każdy zaznaczony element <input>.
:disabled	input:disabled input[type=text]:disabled	Wybiera każdy wyłączony element <input>. Wybiera każdy wyłączony element <input> z atrybutem type="text".
:enabled	input:enabled input[type=text]:enabled	Wybiera każdy włączony element <input>. Wybiera każdy włączony element <input> z atrybutem type="text".
:empty	div:empty p:empty	Wybiera każdy pusty element <div>. Wybiera każdy pusty element <p>.
:first-child	p:first-child li:first-child	Wybiera każdy element <p>, który jest pierwszym dzieckiem swojego rodzica. Wybiera każdy element <li>, który jest pierwszym dzieckiem swojego rodzica.
:nth-child(n)	p:nth-child(2) p:nth-child(3)	Wybiera każdy element <p>, który jest drugim dzieckiem swojego rodzica. Wybiera każdy element <p>, który jest trzecim dzieckiem swojego rodzica
:last-child	p:last-child li:last-child	Wybiera każdy element <p>, który jest ostatnim dzieckiem swojego rodzica. Wybiera każdy element <li>, który jest ostatnim dzieckiem swojego rodzica.
:nth-last-child(n)	p:nth-last-child(2) p:nth-last-child(3)	Wybiera każdy element <p>, który jest entym drugimdzieckiem swojego rodzica, licząc od ostatniego elementu potomnego. Wybiera każdy element <p>, który jest entym trzecim dzieckiem swojego rodzica, licząc od ostatniego elementu potomnego.
:only-child	div:only-child	Wybiera każdy element, który jest jedynym dzieckiem swojego rodzica.
:first-of-type	p:first-of-type li:first-of-type	Wybiera każdy element <p>, który jest pierwszym elementem swojego rodzica. Wybiera każdy element <li>, który jest pierwszym elementem swojego rodzica.
:nth-of-type(n)	p:nth-of-type(2) p:nth-of-type(3)	Wybiera każdy element <p>, który jest drugim elementem swojego rodzica. Wybiera każdy element <p>, który jest trzecim elementem swojego rodzica.
:last-of-type	p:last-of-type li:last-of-type	Wybiera każdy element <p>, który jest ostatnim elementem swojego rodzica. Wybiera każdy element <li>, który jest ostatnim elementem swojego rodzica.
:nth-last-of-type(n)	p:nth-last-of-type(2) p:nth-last-of-type(3)	Wybiera każdy element <p>, który jest entym drugim elementem swojego rodzica, licząc od ostatniego elementu potomnego. Wybiera każdy element <p>, który jest entym trzecim elementem swojego rodzica, licząc od ostatniego elementu potomnego.
:only-of-type	div:only-of-type	Wybiera każdy element, który jest jedynym elementem swojego rodzica.
:focus	input:focus	Wybiera element <input>, który ma fokus.
:hover	a:hover div:hover p:hover	Wybiera element <a> po najechaniu myszką. Wybiera element <div> po najechaniu myszką. Wybiera element <p> po najechaniu myszką.
:in-range	input:in-range	Wybiera elementy <input> o wartości z określonego zakresu.
:out-of-range	input:out-of-range	Wybiera elementy <input> z wartością spoza określonego zakresu.
:lang()	p:lang(pl) p:lang(en) p:lang(de) p:lang(es)	Wybiera każdy element <p> z wartością atrybutu lang="pl". Wybiera każdy element <p> z wartością atrybutu lang="en". Wybiera każdy element <p> z wartością atrybutu lang="de". Wybiera każdy element <p> z wartością atrybutu lang="es".
:link	a:link	Zaznacza wszystkie nieodwiedzone odnośniki.
:not(selector)	:not(p)	Wybiera każdy element, który nie jest elementem <p>.
:read-only	input:read-only	Wybiera elementy <input> z atrybutem readonly (tylko do odczytu).
:read-write	input:read-write	Wybiera elementy <input> bez atrybutu readonly (tylko do odczytu).
:required	input:required	Wybiera elementy <input> z atrybutem required.
:optional	input:optional	Wybiera elementy <input> bez atrybutu required.
:root	:root	Wybiera główny element dokumentu.
:target	:target	Wybiera bieżący aktywny element <a href="nazwa-etykiety"> (kliknięto adres URL zawierający nazwa-etykiety)
:valid	input:valid	Wybiera zaznaczony element <input>.
:invalid	input:invalid	Wybiera niezaznaczony element <input>.
:visited	a:visited	Zaznacza wszystkie odwiedzone odnośniki.

Selektory pseudo elementów (pseudo elementy)

składnia:
selector::pseudo-element { property: value; }
selektor::pseudo-element { właściwość: wartość }

selektor	przykład	opis
::before	selektor::before { content: "treść" }	Wstaw zawartość przed każdym wskazanym selektorem
::after	selektor::after { content: "treść" }	Wstaw zawartość po każdym wskazanym selektorze
::first-letter	selektor::first-letter { właściwość: wartość }	Wybiera pierwszą literę każdego wskazanego selektora
::first-line	selektor::first-line { właściwość: wartość }	Wybiera pierwszą linię każdego wskazanego selektora
::marker	selektor::marker { właściwość: wartość }	Wybiera znaczniki elementów listy
::selection	selektor::selection { właściwość: wartość }	Zaznacza część elementu, która jest wybrana przez użytkownika