Selektory – część 3

W pierwszym wpisie dotyczącym selektorów poznaliście selektory elementów i selektory specjalne. Natomiast w drugim poznaliście selektory atrybutów oraz pseudoelementów. Dzisiaj czas na ostatnią część.

 

Selektory pseudoklas

:root – element który jest głównym elementem w dokumencie – w html jest to znacznik <html>

E:first-child – element, który jest pierwszym dzieckiem swojego rodzica

 

E:last-child – element, który jest ostatnim dzieckiem swojego rodzica

 

E:only-child – element, który jest jedynym dzieckiem swojego rodzica

 

E:nth-child(n) – element, który jest n-tym dzieckiem rodzica

 

E:nth-last-child(n) – element, który jest n-tym od końca dzieckiem swojego rodzica

 

E:first-of-type – element, który jest pierwszym elementem tego typu wewnątrz swojego rodzica (ten sam znacznik)

 

E:last-of-type – element, który jest ostatnim elementem tego typu wewnątrz swojego rodzica (ten sam znacznik)

 

E:only-of-type – element, który jest jedynym elementem tego typu wewnątrz swojego rodzica (ten sam znacznik)

 

E:nth-of-type(n) -element, który jest n-tym elementem tego typu wewnątrz swojego rodzica (ten sam znacznik)

 

E:nth-last-of-type(n) -element, który jest n-tym od końca elementem tego typu wewnątrz swojego rodzica (ten sam znacznik)

 

:empty – element, który jest pusty i nie zawiera tekstu

 

:link – element, który jest linkiem i którego strona docelowa nie została jeszcze odwiedzona

:visited – element, który jest linkiem i którego strona docelowa została już odwiedzona

 

E:active – element, który jest w trakcie kliknięcia (przytrzymanie lewego klawisza myszki)
E:hover – element, który jest wskazany (najechany) kursorem myszki
E:focus – element, który został zogniskowany – np. link, który został wybrany za pomocą tabulatora lub pole formularza w którym znajduje się kursor (możemy w nim w danej chwili pisać)

 

:target – element, który jest wskazany przed aktualny adres url. Adresem url można wskazywać też konkretny element na stronie, który ma ustawione id – np. mamy na stronie element o id=”element_1″ to dodając do adresu url „#element_1” wskażemy ten element (strona nawet zostanie przewinięta do tego elementu.

 

:lang(c) – element, który ma ustawiony atrybut „lang” o wartości „c”

 

E:enabled – element, który jest odblokowany (domyślnie każdy, nie ma ustawionego atrybutu „disabled”) – np. przycisk lub pole formularza
E:disabled – element, który jest zablokowany (ma ustawiony atrybut „disabled”) – np. przycisk lub pole formularza
E:checked – element, który został wybrany/zaznaczony – dotyczy znacznika input z atrybutem type=”radio” oraz type=”checkbox” i znacznika select, którego jedna z opcji (znacznik option) posiada atrybut „selected”

 

:not(s) – element, który nie może zostać określony przez selektor „s”


Post 3 z 3 z serii Selektory CSS