Kurs HTML

Czym są pseudoelementy?

Pseudoelementy w CSS to specjalne słowa kluczowe, które pozwalają stylizować **określone części** elementu, a nie cały element w danym stanie (jak pseudoklasy).

Można je traktować jak "wirtualne" elementy dodawane przez CSS do drzewa dokumentu, które nie istnieją w kodzie HTML, ale można je stylizować. Pozwalają one na bardziej precyzyjne i kreatywne formatowanie treści.

Przykłady zastosowań:

• Dodawanie dekoracyjnej treści przed lub po elemencie (np. ikonki, cudzysłowy).
• Stylizowanie pierwszej litery lub pierwszej linii akapitu.
• Formatowanie znaczników listy (punktory, numeracja).
• Zmiana wyglądu zaznaczonego przez użytkownika tekstu.

Różnica między pseudoklasami a pseudoelementami

Choć nazwy są podobne, pseudoklasy i pseudoelementy pełnią różne funkcje:

• Pseudoklasy (np. :hover, :first-child, :checked): Wybierają **całe elementy**, które znajdują się w określonym **stanie** lub spełniają określone **kryterium strukturalne**. Odpowiadają na pytanie "W jakim stanie jest element?" lub "Który to element?".
• Pseudoelementy (np. ::before, ::first-letter, ::marker): Wybierają i pozwalają stylizować **określoną część** elementu lub dodają wirtualną treść. Odpowiadają na pytanie "Którą część elementu stylizujemy?".

Kluczowa różnica tkwi w tym, że pseudoklasy wybierają istniejące elementy w specyficznych warunkach, podczas gdy pseudoelementy działają jakby tworzyły nowe, wirtualne elementy lub wybierały fragmenty istniejących.

Składnia: Pojedynczy vs Podwójny Dwukropek (: vs ::)

W starszych wersjach CSS (CSS1 i CSS2), zarówno pseudoklasy, jak i pseudoelementy używały składni z **pojedynczym dwukropkiem** (np. :hover, :before, :first-letter).

Aby wyraźnie odróżnić pseudoklasy od pseudoelementów, specyfikacja CSS3 wprowadziła składnię z **podwójnym dwukropkiem (::)** dla pseudoelementów (np. ::before, ::first-letter).

Zalecana praktyka:

• Używaj **pojedynczego dwukropka (:)** dla **pseudoklas**.
• Używaj **podwójnego dwukropka (::)** dla **pseudoelementów**.

Przeglądarki zazwyczaj obsługują również starszą składnię z pojedynczym dwukropkiem dla pseudoelementów (:before, :after, :first-line, :first-letter) ze względu na kompatybilność wsteczną. Jednak dla nowych pseudoelementów wprowadzonych w CSS3 i późniejszych (np. ::marker, ::placeholder) wymagana jest składnia z podwójnym dwukropkiem.

Stosowanie podwójnego dwukropka dla wszystkich pseudoelementów poprawia czytelność kodu i jasno komunikuje intencje.

/* Pseudoklasa - pojedynczy dwukropek */
a:hover {
  color: red;
}

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

/* Pseudoelement - zalecany podwójny dwukropek */
p::first-line {
  text-transform: uppercase;
}

li::marker {
  color: blue;
}

/* Pseudoelement - składnia z pojedynczym dwukropkiem (działa, ale mniej zalecana) */
p:first-letter {
  font-size: 2em;
}

div:before {
    content: ">> ";
}
Kopiuj

Gdzie umieszczać pseudoelementy w selektorze?

Pseudoelement musi znajdować się **na samym końcu** selektora. Nie można do niego dołączyć kolejnej pseudoklasy ani innego selektora.

/* POPRAWNIE: */
/* Stylizuj ::before dla elementu p z klasą .intro */
p.intro::before {
  content: "Wstęp: ";
}

/* Stylizuj ::first-letter dla elementu p, który jest :first-child */
p:first-child::first-letter {
  color: green;
}

/* BŁĘDNIE: */
/* Nie można dodać pseudoklasy PO pseudoelemencie */
/* p::first-letter:hover { ... } */ /* NIEPOPRAWNE */

/* Nie można dodać selektora PO pseudoelemencie */
/* div::before span { ... } */ /* NIEPOPRAWNE */
Kopiuj