Pseudoelementy i pseudoklasy

W CSS istnieją pseudoelementy i pseudoklasy, które pozwalają na selekcję i stylowanie pewnych stanów elementów, jak również wstawianie treści bez konieczności modyfikowania kodu HTML. To potężne narzędzie do usprawnienia prezentacji i interakcji na stronie.

Pseudoklasy

Pseudoklasy definiują pewien stan elementu lub określone warunki, w których element się znajduje, np. najechanie kursorem (:hover), ustawienie fokusu (:focus) czy wyświetlanie pierwszego elementu z listy (:first-child).

Przykłady popularnych pseudoklas

• :hover - stosowana przy najechaniu kursorem:
• :focus - stosowana, gdy element (np. pole formularza) jest aktywny:
• :active - stosowana w momencie kliknięcia i przytrzymania przycisku myszy na elemencie:
• :first-child / :last-child - stylowanie pierwszego/ostatniego dziecka w elemencie nadrzędnym:
• :nth-child(n) - umożliwia precyzyjne wybranie n-tego dziecka w elemencie nadrzędnym:

a:hover {
  color: red;
}

input:focus {
  outline: 2px solid #009688;
}

button:active {
  transform: scale(0.95);
}

li:first-child {
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Pseudoelementy

Pseudoelementy pozwalają na tworzenie i stylowanie elementów „wirtualnych”, które nie istnieją w kodzie HTML, ale mogą zostać wyświetlone. Najpopularniejsze to ::before oraz ::after (w starszych przeglądarkach notacja pojawia się także jako :before, :after).

::before i ::after

• ::before - wstawia treść przed zawartością wybranego selektora.
• ::after - wstawia treść po zawartości wybranego selektora.

Oba pseudoelementy wymagają właściwości content, która może przyjmować ciąg tekstowy lub być pustym ciągiem:

Zastosowanie w praktyce: Można je wykorzystać np. do tworzenia znaczników cudzysłowu, dodawania ozdobnych ikon lub czyszczenia przepływu float za pomocą tzw. clearfix.

h1::before {
  content: "§ ";
  color: red;
}

h1::after {
  content: " ✨";
  color: gold;
}

Zaawansowane przykłady pseudoelementów

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Pseudoklasy i pseudoelementy dają ogromne możliwości kontrolowania wyglądu oraz zachowania elementów na stronie, bez konieczności zmiany struktury HTML. Pseudoklasy odpowiadają za stany i warunki (np. :hover, :focus), a pseudoelementy umożliwiają wstawianie dodatkowej zawartości (::before, ::after) czy stylizowanie fragmentów tekstu (::first-line, ::first-letter). Umiejętne korzystanie z tych mechanizmów pozwala tworzyć bardziej interaktywne, eleganckie i intuicyjne interfejsy.