Pseudoklasy i pseudoelementy w CSS

CSS pozwala na precyzyjne stylowanie elementów HTML. Czasem jednak trzeba odwołać się nie tylko do samego elementu, ale także do jego stanu (np. po najechaniu kursorem) albo do części elementu, której w kodzie HTML nie ma. Do tego służą pseudoklasy i pseudoelementy.

1. Pseudoklasy

Pseudoklasa określa specjalny stan elementu – np. czy użytkownik najechał na link, czy pole formularza jest zaznaczone, czy element jest pierwszym dzieckiem rodzica.

Najczęściej używane pseudoklasy:

a) Interakcyjne

:hover – gdy kursor myszy znajduje się nad elementem
:focus – gdy element (np. input) ma fokus (aktywny do wpisywania)
:active – w momencie kliknięcia na element
:visited – dla odwiedzonych linków
:disabled, :checked – dla elementów formularzy

Przykład:

b) Strukturalne

:first-child – pierwszy element w danym rodzicu
:last-child – ostatni element w danym rodzicu
:nth-child(n) – wybiera elementy według wzoru (np. co drugi)
:nth-of-type(n) – podobnie, ale z uwzględnieniem typu znacznika
:not(selektor) – wybiera elementy, które nie spełniają warunku

Przykład:

c) Pseudoklasy dynamiczne i inne

:target – element, do którego prowadzi odnośnik z #id
:empty – element bez zawartości
:valid / :invalid – dla pól formularzy (poprawne / niepoprawne dane)

Przykład – walidacja:

2. Pseudoelementy

Pseudoelement pozwala stylować lub tworzyć części elementu, które nie są osobno zapisane w HTML. Zapisuje się je z podwójnym dwukropkiem ::.

Najczęściej używane pseudoelementy:

::before – dodaje zawartość przed elementem
::after – dodaje zawartość po elemencie
::first-letter – pierwsza litera w elemencie
::first-line – pierwsza linia tekstu
::selection – fragment zaznaczony przez użytkownika

Przykład – dodanie ikonki przed linkiem:

Przykład – cytaty z cudzysłowami:

Przykład – zaznaczony tekst:

3. Efekty interaktywne z pseudoklasami i pseudoelementami

Połączenie pseudoklas i pseudoelementów pozwala tworzyć atrakcyjne efekty bez dodatkowego HTML-a czy JavaScriptu.

a) Podkreślenie animowane

Podczas najechania link jest podkreślany animowaną linią.

b) Guzik z efektem „falowania”

Kliknięcie generuje efekt „fali”.

Na hover pokazuje się dymek z dodatkowym tekstem.