Selektory pseudoklas – jakie stany mogą posiadać obiekty HTML

Kategoria wpisu Kurs CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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 che 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.

przykładowe stany przyjmowane przez elementy HTML

przykładowe stany przyjmowane przez elementy HTML

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:

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *