Pseudoelement ::first-letter w CSS

::first-letter to pseudoelement CSS, który pozwala ostylować wyłącznie pierwszą literę tekstu znajdującego się w wybranym elemencie.

Przykład:

h1::first-letter {
  color: red;
}

Ten zapis oznacza: wybierz elementy h1 i zastosuj styl tylko do ich pierwszej litery. W tym przypadku pierwsza litera nagłówka pierwszego poziomu będzie czerwona.

Budowa zapisu

selektor::first-letter {
  właściwość: wartość;
}

W pytaniu egzaminacyjnym:

h1::first-letter {
  color: red;
}

• h1 — selektor elementu HTML, czyli nagłówek pierwszego poziomu,
• ::first-letter — pseudoelement wybierający pierwszą literę,
• color: red; — ustawia czerwony kolor tekstu.

Ważne na egzaminie

::first-letter nie oznacza całego tekstu elementu. Nie zmienia też pierwszej linii. Do pierwszej linii służy inny pseudoelement: ::first-line.

Przykład HTML i CSS

<h1>Witamy</h1>

h1::first-letter {
  color: red;
}

Efekt: tylko litera W w nagłówku będzie czerwona.