CSS ::first-letter

::first-letter to pseudoelement CSS, który pozwala ostylować pierwszą literę pierwszej linii tekstu danego elementu, np. akapitu <p>.

Najczęściej używa się go do wyróżnienia pierwszej litery akapitu, np. w stylu inicjału znanego z książek lub artykułów.

Składnia

p::first-letter {
  color: red;
  font-size: 200%;
  font-weight: bold;
}

Ten zapis oznacza: wybierz pierwszą literę każdego elementu <p> i zastosuj do niej podane style.

Dlaczego używa się ::, a nie .?

Kropka oznacza klasę CSS, np.:

p.first-letter {
  color: red;
}

Ten selektor wybiera akapit <p>, który ma klasę first-letter, a nie pierwszą literę tekstu.

Poprawny selektor dla pierwszej litery to:

p::first-letter

Przykład HTML i CSS

<p>To jest przykładowy akapit.</p>

p::first-letter {
  font-size: 32px;
  color: blue;
}

Efekt: tylko litera T zostanie powiększona i pokolorowana.

Typowe zastosowania

• wyróżnienie pierwszej litery akapitu,
• tworzenie inicjału na początku tekstu,
• dekoracyjne formatowanie artykułów i wpisów blogowych.

Ważne na egzaminie

::first-letter jest pseudoelementem, a nie klasą, atrybutem ani selektorem dziecka. Dlatego poprawny zapis to:

p::first-letter