Pseudoklasy w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym są pseudoklasy w CSS?

Pseudoklasy w CSS pozwalają stylować elementy HTML w zależności od ich stanu lub położenia w dokumencie, bez potrzeby dodawania klas w kodzie HTML. Zapisuje się je po selektorze, poprzedzając dwukropkiem, np. a:hover.

Dzięki pseudoklasom można zmieniać wygląd elementu, gdy użytkownik wykona określoną akcję, np. najedzie kursorem, kliknie element albo odwiedzi link.

Najczęściej spotykane pseudoklasy

  • :hover – działa, gdy kursor znajduje się nad elementem
  • :active – działa w momencie aktywacji elementu, np. podczas kliknięcia
  • :visited – dotyczy odwiedzonych linków
  • :focus – działa, gdy element, np. pole formularza, ma fokus
  • :first-child – wybiera element będący pierwszym dzieckiem rodzica

Przykład użycia

p:hover {
  color: red;
}

W tym przykładzie kolor tekstu akapitu zmieni się na czerwony po najechaniu kursorem.

Różnica między pseudoklasą a pseudoelementem

Pseudoklasa opisuje stan elementu, np. :hover, a pseudoelement odnosi się do części elementu, np. ::first-line.

Przykłady:

a:hover {
  text-decoration: underline;
}

p::first-line {
  font-weight: bold;
}

Zastosowanie na egzaminie

W pytaniach egzaminacyjnych często trzeba rozpoznać, która pseudoklasa odpowiada za określone zachowanie:

  • zmiana stylu po najechaniu kursorem → :hover
  • styl odwiedzonego linku → :visited
  • styl podczas kliknięcia → :active

Najważniejsze do zapamiętania

  • pseudoklasy zapisujemy z pojedynczym dwukropkiem, np. :hover
  • służą do stylowania elementów zależnie od ich stanu
  • do zmiany koloru tekstu po najechaniu kursorem używa się :hover
  • zapis :coursor jest błędny i nie istnieje w CSS