Czym są pseudoklasy w CSS?

Pseudo-klasy w CSS to słowa kluczowe dodawane do selektorów, aby wskazać szczególny stan elementu. Pozwalają na stosowanie stylów w oparciu o interakcję użytkownika, pozycję w strukturze dokumentu lub inne cechy, które nie mogą być wyrażone za pomocą standardowych selektorów.

Przykłady pseudo-klas:

• Stany użytkownika:

  • :hover - element, nad którym znajduje się kursor myszy.
  • :active - element, który jest aktywowany (np. kliknięty przycisk myszy).
  • :focus - element, który ma fokus wejściowy (np. pole tekstowe).
  • :visited - link, który użytkownik już odwiedził.
  • :link - link, którego użytkownik jeszcze nie odwiedził.

• Pozycja w strukturze:

  • :first-child - pierwszy element potomny swojego rodzica.
  • :last-child - ostatni element potomny swojego rodzica.
  • :nth-child(n) - n-ty element potomny swojego rodzica.
  • :first-of-type - pierwszy element swojego typu wśród potomków.
  • :last-of-type - ostatni element swojego typu wśród potomków.

• Inne:

  • :empty - element, który nie zawiera potomków ani tekstu.
  • :not(selector) - elementy, które nie pasują do podanego selektora.

Składnia:

selector:pseudo-class {
  property: value;
}

Przykład użycia:

/* Zmiana koloru tekstu po najechaniu na akapit */
p:hover {
  color: blue;
}

/* Styl dla pierwszego elementu listy */
li:first-child {
  font-weight: bold;
}

Pseudo-klasy rozszerzają możliwości selektorów, umożliwiając tworzenie bardziej dynamicznych i interaktywnych interfejsów bez użycia JavaScript do prostych zmian stylu.