CSS ::first-line

Co to jest CSS ::first-line?

::first-line to pseudoelement CSS, który pozwala nadać styl tylko pierwszej wyświetlanej linii tekstu w elemencie blokowym, np. w akapicie <p>.

Najczęściej stosuje się go do wyróżnienia początku akapitu, podobnie jak w składzie gazetowym lub książkowym.

Przykład

p::first-line {
  font-size: 150%;
  font-weight: bold;
}

Taki kod oznacza, że pierwsza linia każdego akapitu <p> będzie miała czcionkę większą o 150% względem wartości bazowej. Pozostałe linie akapitu nie zostaną objęte tym stylem.

Ważne cechy

• działa na pierwszą linię widoczną w układzie strony, a nie na pierwszy wiersz zapisany w kodzie HTML,
• jeśli zmieni się szerokość okna przeglądarki, może zmienić się też zawartość pierwszej linii,
• stosuje się go do elementów blokowych, np. <p>, <div>, <article>,
• nie oznacza pierwszego akapitu na stronie — od tego służą inne selektory, np. :first-of-type.

Różnica między ::first-line a :first-child

p::first-line {
  color: red;
}

Styluje pierwszą linię każdego akapitu.

p:first-child {
  color: red;
}

Styluje cały akapit, jeśli jest pierwszym dzieckiem swojego rodzica.

Wniosek egzaminacyjny

Kod:

p::first-line {
  font-size: 150%;
}

powiększy pierwszą linię każdego paragrafu, a nie cały paragraf ani tylko pierwszy paragraf na stronie.