Aby uzyskać efekt polegający na sformatowaniu pierwszej litery tekstu (np. bardzo duży niebieski inicjał na początku akapitu), w CSS stosuje się pseudoelement ::first-letter. Pseudoelement "wybiera" fragment treści elementu (tu: pierwszą literę), a nie cały element ani element oznaczony klasą.
Dlaczego poprawna jest reguła p::first-letter { ... }?
Selektor p ogranicza działanie do akapitów <p>, a ::first-letter wskazuje dokładnie pierwszą literę renderowanego tekstu w każdym takim akapicie. Wtedy właściwości, np. font-size: 400% i color: blue, dotyczą tylko tej litery.
Dlaczego pozostałe odpowiedzi są błędne?
- .first-letter to selektor klasy. Zadziała wyłącznie na elementach, które mają class="first-letter". Nie wybiera automatycznie pierwszej litery tekstu.
- #first-letter to selektor identyfikatora. Dotyczy jednego elementu z id="first-letter". Również nie oznacza "pierwszej litery".
- p.first-letter wybiera tylko te akapity <p>, które mają klasę first-letter. Nadal styluje cały akapit, a nie jego pierwszą literę (chyba że dodatkowo użyto by pseudoelementu).
Wskazówka egzaminacyjna: jeśli w odpowiedziach pojawia się zapis z podwójnym dwukropkiem (::), sprawdź, czy pytanie dotyczy fragmentu elementu (litera, linia, znacznik listy). To zwykle sygnał, że chodzi o pseudoelement, a nie o klasę/identyfikator.
