Pseudoklasy — CSS

Pseudoklasy opisują stan elementu, np. najechanie kursorem lub fokus.

Jak to działa?

:hover reaguje na kursor, a :focus-visible pozwala wyróżnić fokus klawiatury. Dobrze zaprojektowany fokus jest ważny dla dostępności.

Przykład 1 — poznaj zapis

.button:hover {
  background: #2447c8;
}
.button:focus-visible {
  outline: 0.2rem solid #f59e0b;
  outline-offset: 0.15rem;
}

Użytkownik klawiatury zobaczy wyraźne obramowanie fokusu.

Przeczytaj kod linijka po linijce

.button:hover {Wybieramy elementy, które mają otrzymać podane style.
background: #2447c8;Nadajemy kolor lub wygląd tła.
.button:focus-visible {Wybieramy elementy, które mają otrzymać podane style.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Zmieniony wygląd po najechaniu i przy nawigacji klawiaturą.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

button:focus-visible { outline: 3px solid orange; }

Wynik drugiego przykładupo uruchomieniu przykładu

Przycisk otrzymuje widoczny obrys przy nawigacji klawiaturą.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj styl przycisku w stanie :disabled.