Pseudoelement ::first-line w CSS - Kurs CSS od Podstaw

11.4. Pseudoelement `::first-line`

Strona główna > Kurs CSS > Rozdział 11: Pseudoelementy > Pseudoelement ::first-line

Wprowadzenie: Stylizowanie pierwszego wiersza

Pseudoelement ::first-line pozwala wybrać i nadać specjalny styl **pierwszemu sformatowanemu wierszowi** tekstu wewnątrz elementu blokowego (podobnie jak ::first-letter, działa na elementach typu block, inline-block, list-item, table-cell, table-caption).

Długość (liczba słów) pierwszego wiersza zależy od wielu czynników, takich jak szerokość elementu, rozmiar czcionki, a nawet rozmiar okna przeglądarki. ::first-line dynamicznie dopasowuje się do aktualnie sformatowanego pierwszego wiersza.

Jest to przydatne do wyróżnienia początku akapitu, np. poprzez zmianę koloru, wagi czcionki lub dodanie przekształcenia tekstu.

Jak działa `::first-line`?

Przeglądarka podczas renderowania tekstu określa, które słowa mieszczą się w pierwszym wierszu danego bloku. Do tych właśnie słów (a dokładniej, do fragmentu tekstu tworzącego pierwszy wiersz) stosowane są style zdefiniowane dla ::first-line.

Jeśli zmienisz rozmiar okna lub szerokość kontenera, zawartość pierwszego wiersza może się zmienić, a style ::first-line zostaną automatycznie zastosowane do nowego pierwszego wiersza.

<p class="highlight-first">To jest przykładowy, nieco dłuższy akapit tekstu, którego pierwszy wiersz zostanie specjalnie ostylowany. Zobacz, jak stylizacja dopasowuje się, gdy zmieniasz szerokość okna przeglądarki.</p>

.highlight-first::first-line {
  color: navy; /* Ciemnoniebieski kolor */
  font-weight: bold; /* Pogrubienie */
  text-transform: uppercase; /* Wielkie litery */
  letter-spacing: 1px; /* Zwiększony odstęp między literami */
}

Wypróbuj: Zmieniaj szerokość okna przeglądarki, a zobaczysz, że styl (wielkie litery, pogrubienie, kolor) jest zawsze stosowany tylko do słów mieszczących się w pierwszym wierszu akapitu.

Dozwolone właściwości CSS dla `::first-line`

Podobnie jak w przypadku ::first-letter, tylko ograniczony zestaw właściwości CSS może być stosowany do ::first-line. Są to głównie właściwości wpływające na wygląd tekstu:

Czcionka: font, font-family, font-size, font-style, font-variant, font-weight.
Kolor i tło: color, background.
Odstępy i dekoracje: word-spacing, letter-spacing, text-decoration, text-transform, line-height, vertical-align.

Właściwości takie jak margin, padding, border, text-align, float, clear, position, display **nie mogą** być stosowane do ::first-line.

Interakcja z `::before` i `::first-letter`

::before: Jeśli element ma pseudoelement ::before z treścią, ta treść jest wliczana do pierwszego wiersza i może być objęta stylizacją ::first-line.
::first-letter: Jeśli używane są oba pseudoelementy, ::first-letter ma pierwszeństwo dla pierwszej litery. Styl ::first-line zostanie zastosowany do reszty pierwszego wiersza.

<p class="combined-pseudo">Pierwsza litera i pierwszy wiersz będą inaczej ostylowane.</p>

.combined-pseudo::first-line {
  color: gray;
  text-transform: uppercase;
}

.combined-pseudo::first-letter {
  font-size: 1.5em;
  color: red; /* Ten kolor nadpisze szary z ::first-line dla pierwszej litery */
  font-weight: bold;
}

W tym przykładzie, pierwsza litera "P" będzie czerwona, pogrubiona i powiększona (styl z ::first-letter). Reszta pierwszego wiersza ("IERWSZA LITERA I PIERWSZY WIERSZ BĘDĄ") będzie szara i zapisana wielkimi literami (styl z ::first-line).

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz akapit tekstu. Użyj ::first-line, aby nadać pierwszemu wierszowi inny kolor tła i pogrubioną czcionkę.

Rozwiązanie:

HTML:

<p class="first-line-bg">Ten akapit ma wyróżniony pierwszy wiersz za pomocą innego koloru tła. Zobacz, jak tło dopasowuje się do długości pierwszego wiersza przy zmianie szerokości okna.</p>

CSS:

.first-line-bg::first-line {
  background-color: lightyellow; /* Jasnożółte tło */
  font-weight: bold; /* Pogrubienie */
  color: #333; /* Ciemniejszy kolor tekstu dla kontrastu */
}

Efekt: Pierwszy wiersz akapitu będzie miał jasnożółte tło i pogrubiony tekst.

Zadanie 2 (do samodzielnego wykonania)

Stwórz kilka elementów listy li. Użyj ::first-line, aby przekształcić tekst pierwszego wiersza każdego elementu listy na wielkie litery (text-transform: uppercase;).

Zadanie 3 (do samodzielnego wykonania)

Stwórz akapit i zastosuj do niego zarówno ::first-letter (np. powiększenie i inny kolor), jak i ::first-line (np. kursywa). Zaobserwuj, jak style współgrają.

FAQ - Najczęściej zadawane pytania

Czy `::first-line` działa na elementach `inline`?

Nie, podobnie jak ::first-letter, pseudoelement ::first-line działa tylko na elementach blokowych lub zachowujących się jak blokowe (block, inline-block, list-item, table-cell, table-caption). Nie ma zastosowania do elementów czysto liniowych.

Co jeśli pierwszy wiersz zawiera obrazek lub inny element inline?

Styl ::first-line zostanie zastosowany do tekstu w pierwszym wierszu. Jeśli w pierwszym wierszu znajduje się element inline (np. span, img z vertical-align), styl ::first-line może, ale nie musi, wpłynąć na ten element, w zależności od konkretnych właściwości i zachowania przeglądarki. Zazwyczaj jednak stylizuje on głównie sam tekst.

Czy mogę użyć `::first-line` do zmiany marginesów lub paddingu?

Nie, właściwości związane z modelem pudełkowym (margin, padding, border) oraz właściwości pozycjonowania i wyświetlania (position, display, float) nie mogą być stosowane do ::first-line.

Jak `::first-line` współpracuje z justowaniem tekstu (`text-align: justify`)?

::first-line stylizuje pierwszy wiersz niezależnie od metody wyrównania tekstu. Jeśli tekst jest justowany, styl ::first-line zostanie zastosowany do słów tworzących pierwszy, wyjustowany wiersz.

11.4. Pseudoelement ::first-line