Pseudoelement ::first-letter w CSS

Pseudoelement ::first-letter w CSS

Pseudoelement ::first-letter służy do formatowania pierwszej litery tekstu znajdującego się w elemencie, np. w akapicie <p>. Jest często używany do uzyskania efektu inicjału, czyli wyróżnionej pierwszej litery na początku akapitu.

Składnia

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

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

Dlaczego ::first-letter, a nie .first-letter?

Zapis:

p.first-letter

oznacza element <p>, który ma klasę first-letter, np. <p class="first-letter">. Nie wybiera pierwszej litery.

Zapis:

p::first-letter

to pseudoelement, czyli specjalny fragment elementu, którego nie trzeba oznaczać w HTML.

Jedna czy dwie dwukropki?

Poprawny współczesny zapis to:

p::first-letter

Starszy zapis p:first-letter także bywa obsługiwany przez przeglądarki, ale w nowoczesnym CSS pseudoelementy zapisuje się z podwójnym dwukropkiem ::.

Przykład HTML i CSS

<p>To jest pierwszy akapit.</p>

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

Efekt: tylko litera „T” zostanie inaczej sformatowana.