Pseudoelement CSS ::first-line

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

Pseudoelement CSS ::first-line

Pseudoelement ::first-line służy do stylizowania pierwszej linii tekstu wewnątrz elementu blokowego, np. akapitu <p>. Nie wymaga dodawania osobnej klasy do pierwszego wiersza w HTML — przeglądarka sama określa, która część tekstu mieści się w pierwszej linii.

Składnia

p::first-line {
  font-size: 200%;
  color: brown;
}

Ten zapis oznacza: zastosuj styl tylko do pierwszej linii każdego akapitu <p>.

Przykład HTML

<p>
  Mimozami jesień się zaczyna,<br>
  Złotawa, krucha i miła.<br>
  To ty, to ty jesteś ta dziewczyna.
</p>

Przykład CSS

p::first-line {
  font-size: 200%;
  color: brown;
}

Efekt: pierwsza linia akapitu będzie większa i brązowa, a pozostałe linie pozostaną bez tej stylizacji.

Ważne rozróżnienie

  • .first-line oznacza element z klasą first-line,
  • #first-line oznacza element o identyfikatorze id="first-line",
  • p.first-line oznacza akapit <p> z klasą first-line,
  • p::first-line oznacza pierwszą linię tekstu w akapicie.

W pytaniach egzaminacyjnych należy zwracać uwagę na podwójny dwukropek ::, który wskazuje pseudoelement CSS.