Pseudoelement CSS ::first-letter

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Pseudoelement CSS ::first-letter

::first-letter to pseudoelement CSS, który pozwala sformatować pierwszą literę tekstu znajdującego się w wybranym elemencie. Stosuje się go np. do nagłówków, akapitów lub innych elementów tekstowych.

Składnia

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

Przykład:

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

Ten zapis oznacza: ustaw kolor czerwony dla pierwszej litery każdego elementu h1, czyli nagłówka pierwszego poziomu.

Ważne elementy zapisu

  • h1 - selektor elementu, wskazuje nagłówek pierwszego poziomu,
  • ::first-letter - pseudoelement wybierający pierwszą literę,
  • color: red; - deklaracja CSS ustawiająca czerwony kolor tekstu.

Przykład HTML i CSS

<h1>Egzamin INF.03</h1>

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

Efekt: tylko litera E w nagłówku będzie czerwona, a pozostały tekst pozostanie bez tej konkretnej zmiany.

Typowy błąd egzaminacyjny

::first-letter nie oznacza pierwszej linii tekstu. Do pierwszej linii służy inny pseudoelement: ::first-line.

W pytaniu egzaminacyjnym zapis h1::first-letter{color:red;} dotyczy więc pierwszej litery nagłówka pierwszego poziomu.