Opisz pseudoklasy i pseudoelementy w CSS.

Pseudo-klasy i pseudo-elementy rozszerzają możliwości selektorów CSS, pozwalając na stosowanie stylów do elementów na podstawie ich stanu, położenia lub innych cech, które nie mogą być wyrażone za pomocą prostych selektorów.

Pseudo-klasy

Pseudo-klasy zaczynają się od pojedynczego dwukropka (:). Służą do stylizacji elementu w określonym stanie.

Główne pseudo-klasy:

• :hover - stylizuje element podczas najechania kursorem myszy.
• :active - stylizuje element podczas kliknięcia (aktywacji).
• :focus - stylizuje element, który aktualnie ma fokus (np. po przejściu po linku lub kliknięciu w pole wejściowe).
• :visited - stylizuje odwiedzone linki.
• :link - stylizuje nieodwiedzone linki.
• :first-child - stylizuje pierwszy element potomny swojego rodzica.
• :last-child - stylizuje ostatni element potomny swojego rodzica.
• :nth-child(n) - stylizuje n-ty element potomny swojego rodzica. n może być liczbą, słowem kluczowym (even, odd) lub wyrażeniem (2n+1).
• :nth-last-child(n) - stylizuje n-ty element od końca.
• :not(selector) - stylizuje elementy, które nie pasują do podanego selektora.

/* Przykład użycia pseudo-klas */
a:hover {
  color: blue; /* Zmienia kolor linku podczas najechania */
}

input:focus {
  border-color: green; /* Zmienia kolor obramowania pola wejściowego po fokusie */
}

li:first-child {
  font-weight: bold; /* Stylizuje pierwszy element listy */
}

Pseudo-elementy

Pseudo-elementy zaczynają się od podwójnego dwukropka (::). Służą do stylizacji określonej części elementu lub do wstawiania generowanej zawartości przed lub po zawartości elementu.

Główne pseudo-elementy:

• ::before - wstawia generowaną zawartość przed zawartością elementu. Często używany z właściwością content.
• ::after - wstawia generowaną zawartość po zawartości elementu. Również wymaga content.
• ::first-letter - stylizuje pierwszą literę bloku tekstowego.
• ::first-line - stylizuje pierwszy wiersz bloku tekstowego.
• ::selection - stylizuje wybraną część elementu.

/* Przykład użycia pseudo-elementów */
p::first-letter {
  font-size: 2em; /* Powiększa pierwszą literę akapitu */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Dodaje tekst po nagłówku */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Zmienia tło zaznaczonego tekstu */
  color: black;
}

Historycznie, pseudo-klasy używały pojedynczego dwukropka (:) dla kompatybilności z CSS2.1, podczas gdy pseudo-elementy w CSS3 zaczęły używać podwójnego dwukropka (::) dla lepszego rozróżnienia. Zaleca się używanie podwójnego dwukropka w nowoczesnym kodzie.

Tabela porównawcza:

Cecha	Pseudo-klasa	Pseudo-element
Składnia	:selektor	::selektor
Przeznaczenie	Stan elementu	Część elementu lub generowana zawartość
Przykłady	:hover, :focus, :first-child	::before, ::after, ::first-letter