Co to są pseudo-klasy (:hover, :nth-child)

Co to są pseudo-klasy (:hover, :nth-child)

Pseudo-klasy pozwalają na stylowanie elementów HTML w zależności od ich stanu lub pozycji w strukturze dokumentu – bez potrzeby dodawania dodatkowych klas czy JavaScriptu. To bardzo wygodne narzędzie do tworzenia interaktywnych i dynamicznych efektów.

Pseudo-klasy zapisujemy za pomocą dwukropka, np. :hover, :nth-child(), :first-child. W tej lekcji skupimy się na dwóch z nich – najczęściej używanych w praktyce.

1. :hover – stylowanie po najechaniu

:hover to pseudo-klasa, która działa wtedy, gdy użytkownik najedzie kursorem myszy na dany element (np. link, przycisk, obrazek).

button:hover {
  background-color: #388e3c;
  color: white;
  cursor: pointer;
}

Efekt działania: przycisk zmieni kolor tła i tekstu, gdy użytkownik na niego najedzie.

2. :nth-child() – wybieranie elementów według kolejności

:nth-child() pozwala stylować elementy w zależności od ich pozycji wśród rodzeństwa. Możesz wskazać np. co drugi element, każdy trzeci, tylko pierwszy itd.

li:nth-child(odd) {
  background-color: #f0f0f0;
}

li:nth-child(3) {
  font-weight: bold;
}

Efekt działania: wszystkie nieparzyste elementy listy będą miały tło, a trzeci element zostanie pogrubiony.

Przydatne warianty :nth-child

• :nth-child(even) – parzyste elementy
• :nth-child(3n) – każdy trzeci element
• :nth-child(1) – pierwszy element

Dlaczego to jest przydatne?

Możesz z łatwością wyróżnić co drugi wiersz w tabeli, stylować wybrane elementy listy, tworzyć interaktywne efekty w nawigacji czy galeriach – wszystko bez JavaScriptu i bez ręcznego przypisywania klas.

Ćwiczenie – lista z efektami hover i nth-child

W JSFiddle stwórz listę <ul> z pięcioma elementami. Dodaj:

• kolorowe tło dla co drugiego elementu,
• zmianę koloru po najechaniu,
• pogrubienie dla trzeciego elementu.

👉 Przetestuj w JSFiddle

<style>
ul li:nth-child(even) {
  background: #e1f5fe;
}
ul li:nth-child(3) {
  font-weight: bold;
}
ul li:hover {
  background: #0288d1;
  color: white;
}
</style>

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
</ul>

Zmieniaj wartości w :nth-child(), eksperymentuj z kolorami, dodawaj inne style – to świetna okazja, by zrozumieć, jak działają te selektory!