kursy tutoriale

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 po prostu modyfikuje pierwszy wiersz akapitu. 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