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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.