Selektory pseudoklas – jakie stany mogą posiadać obiekty HTML

Selektorem w CSS teoretycznie jest dowolny znacznik określający dowolne cechy elementu HTML. Co w praktyce prowadzi do tego, że istnieje wiele ich odmian. Dziś jednak nie chce o nich wszystkich mówić. Zajmę się jedynie małą grupą selektorów zaliczających się do grupy pseudoklas czyli stanami jakie może posiadać obiekt HTML (np. czy znajduje się na obiekcie kursor, czy klikaliśmy w niego).

Przykładowe sektory

Stany te wykorzystywane są przez twórców stron internetowych w różnym stopniu. Co w praktyce jednak nie oznacza, że one nie zachodzą. Przykładowo kiedy najedziemy kursorem myszy na link to – zmieni on kolor i się podkreśli. Podobny efekt możemy uzyskać na zwykłym akapicie ustawiając w CSS inne właściwości dla p:hover.

Powyższy obrazek pokazuje przykładowe Force state z inspektora kodu. Najczęściej wykorzystywane są one na linkach.

Przykładowe pseudoklasy – rozróżniające stan danego elementu

Najczęściej spotykanymi pseudoklasami jakie określa się dla elementu są:

• :hover – obiekt ma ten stan kiedy najedziemy na niego kursorem myszy
• :focus – obiekt zyskuje ten stan w momencie kliknięcia lub dotknięcia elementu
• :active – obiekt będzie posiadać ten stan w momencie aktywowania danego elementu przez użytkownika
• :visited – obiekt ma ten stan np. w sytuacji kiedy nasza przeglądarka pamięta, że otworzyliśmy ten link

Przykładowa deklaracja:

a:link { color:#ccc; }
a:visited { color: #fff; }
a:hover { color: #eee; }
a:active { color: #ddd; }
a:focus { color: #000; }

Selektory te stosowane są głownie przy budowie menu strony. Oczywiście przy zwykłych likach też się zdarzają, ale niekoniecznie wszystkie. Część z nich wykorzystywana jest również do tworzenia różnych animacji na stronie.

Przykładowe zastosowania tych elementów znajdziecie tutaj!

Źródła:

https://developer.mozilla.org/pl/docs/Web/CSS/:active
https://developer.mozilla.org/pl/docs/Web/CSS/:focus
http://www.kurshtml.edu.pl/css/wskazanie_myszka,pseudoklasy.html
https://developer.mozilla.org/pl/docs/Learn/CSS/Introduction_to_CSS/Selektory