Selektor CSS ::first-line – czyli zmiana wyglądu pierwszej linii tekstu

Czas czytania: < 1 minut

Pseudoelement CSS ::first-line wykorzystywany jest do zmiany właściwości pierwszej linii obiektu blokowego.

Czyli np. modyfikuje pierwszy wiersz elementów takich jak <p>, <div>. Bierze przy tym pod uwagę szerokość pierwszej linki akapitu tekstowego. Czyli jeśli zważymy stronę tekst przeniesiony do 2 linii się nie liczy.

Elementy na które właściwość ma wpływ ::first-line

Jak widać z pomocą tej funkcji CSS możemy dokonać bardzo istotnych zmian dla pierwszej linii edytowanego elementu.

Z selektora mogą korzystać tylko elementy HTML typu blokowego jak (display): block, inline-block, table-caption lub typu table-cell.

Przykładowa deklaracja:

 p::first-line { 
    background-color: pink;
}

Przykład:

O to przykładowy tekst z zastosowaniem pseudo klasy ::first-line. Pokolorowany zostanie tylko pierwszy wiersz akapitu.

Tekst umieszczono w kontenerze jako obiekt blokowy.

Przykładowe użycie selektora wygląda następująco:

<div class="demo">
<p>O to przykładowy tekst z zastosowaniem pseudo klasy ::first-line. Pokolorowany zostanie tylko pierwszy wiersz akapitu.</p>
<p>Tekst umieszczono w kontenerze jako obiekt blokowy.</p>
</div>

Deklaracja CSS z zaprezentowanego przykładu:

.demo{
max-width:300px;
border: 1px solid #ccc;
}
.demo p::first-line { 
    background-color: pink;
}

Jak widać w powyższym przykładzie pokolorowane zostały jedynie pierwsze linki akapitu a pozostałe nie uległy zmianie.

SelectorChromeInternet Explorer / EdgeFirefoxSafariOpera
::first-line1.09.0
Partial from 5.5
1.01.07.0
Partial from 3.5

Źródło: https://www.w3schools.com/cssref/sel_firstline.asp

Dodatkowe tagi:
W jaki sposób wyróżnić pierwszy wiersz, rządek tekstu?
Zmiana właściwości pierwszej linijki akapitu z pomocą CSS