Pseudo-element ::first-letter w CSS służy do stylowania pierwszej litery pierwszej sformatowanej linii elementu blokowego (najczęściej akapitu). Zapis p::first-letter oznacza więc: "we wszystkich elementach <p> wybierz pierwszą literę i zastosuj do niej podane właściwości". To klasyczny sposób uzyskania efektu typograficznego typu drop cap, bez ingerowania w strukturę HTML.
Dlaczego poprawny jest zapis p::first-letter { font-size: 400%; color: blue; }?
- p zawęża działanie reguły do akapitów.
- ::first-letter celuje w konkretną część renderowanego tekstu (pierwszą literę), a nie w cały element.
- font-size: 400% skaluje rozmiar litery względem rozmiaru czcionki elementu <p>.
- color: blue ustawia kolor tej jednej litery.
Dlaczego pozostałe propozycje są błędne w tym kontekście?
- Selektor .first-letter dotyczy elementów z klasą "first-letter". Zadziała tylko wtedy, gdy w HTML ręcznie dodasz class="first-letter" do elementu (i ostylujesz cały element, nie "pierwszą literę").
- Selektor #first-letter działa na element z identyfikatorem "first-letter" i również wymaga modyfikacji HTML (atrybut id). Ponadto ID powinno być unikalne w dokumencie.
- Selektor p.first-letter wybierze tylko te akapity, które mają klasę "first-letter", ale nadal nie wybiera samej pierwszej litery — styluje cały element <p>.
Wskazówka egzaminacyjna: jeśli efekt ma dotyczyć części tekstu (pierwsza litera, pierwsza linia, elementy przed/po), najczęściej potrzebujesz pseudo-elementu (np. ::first-letter), a nie klasy/ID.
