W języku CSS aby zdefiniować odmienne formatowanie dla pierwszej litery akapitu, należy zastosować selektor
p [first-letter]p.first-letterp + first-letterp::first-letterPytanie z egzaminu CKE, styczeń 2017 (arkusz E.14-X-17.01).
Pierwsza litera akapitu nie jest osobnym elementem w kodzie HTML, więc nie da się jej wskazać ani znacznikiem, ani klasą. Do takich fragmentów służą pseudoelementy, zapisywane po dwóch dwukropkach. Selektor p::first-letter wybiera pierwszą literę każdego akapitu - można jej nadać np. większy rozmiar i inny krój, tworząc inicjał jak w książce: p::first-letter { font-size: 200%; }. Podobnie działa p::first-line dla pierwszego wiersza tekstu. Starsza składnia z jednym dwukropkiem, p:first-letter, nadal działa w przeglądarkach. Do zapamiętania: dwa dwukropki to pseudoelement (część elementu), jeden dwukropek to pseudoklasa (stan elementu, np. a:hover).
Każdy z błędnych selektorów to inny rodzaj selektora CSS, który szuka czegoś innego niż litera. Zapis p.first-letter to selektor klasy - wybierze akapity z atrybutem class="first-letter", a takiej klasy w dokumencie nie ma. p + first-letter to kombinator rodzeństwa: wskazuje element o nazwie first-letter stojący zaraz za akapitem, a takiego znacznika HTML nie ma. p [first-letter] ze spacją to selektor potomka z atrybutem - wybierze elementy wewnątrz akapitu mające atrybut first-letter. Żaden z nich nie sięga do fragmentu tekstu. Pierwszą literę wybiera wyłącznie pseudoelement ::first-letter. Warto zapamiętać też inne pseudoelementy: ::first-line formatuje pierwszy wiersz tekstu, a ::before i ::after wstawiają treść przed elementem i po nim. Pseudoelementy działają tylko w elementach blokowych, takich jak akapit czy nagłówek, a ich efekt widać od razu w przeglądarce.