Ostatnio edytowany:

::first-line

Autor: Virtual Patriot

Przeznaczenie selektora ::first-line

      ::first-line { ... }
    

Za pomocą selektora ::first-line możemy sprawić, że treść znajdująca się w pierwszym wierszu interesującego nas elementu HTML zostanie umieszczona w dodatkowym pseudoelemencie.

Dodatkowe techniczne informacje o selektorze ::first-line

ograniczenie - elementy HTML

Tylko element HTML typu block, typu inline-block, typu table-caption lub typu table-cell.

ograniczenie - właściwości CSS

Tylko następujące właściwości CSS: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

Każda przeglądarka internetowa może posiadać swój własny dodatkowy zbiór właściwości CSS, które możemy wykorzystać wraz z selektorem "::first-line".

Przykładowa reguła CSS, selektor ::first-line

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

Wyjaśnienie przykładowej reguły CSS

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

Spraw, aby treść znajdująca się w pierwszym wierszu każdego elementu p została umieszczona w dodatkowym pseudoelemencie oraz

color

była koloru

red

czerwonego

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p::first-line {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      tekst znajdujący się w pierwszym wierszu tego elementu "div" nie został umieszczony w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
    </div>

    <p>
      tekst znajdujący się w pierwszym wierszu tego elementu "p" został umieszczony w dodatkowym pseudoelemencie oraz jest koloru czerwonego, ponieważ ten element HTML jest elementem "p"
    </p>

    <div>
      tekst znajdujący się w pierwszym wierszu tego elementu "div" nie został umieszczony w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w pierwszym wierszu tego elementu "div" nie został umieszczony w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"

tekst znajdujący się w pierwszym wierszu tego elementu "p" został umieszczony w dodatkowym pseudoelemencie oraz jest koloru czerwonego, ponieważ ten element HTML jest elementem "p"

tekst znajdujący się w pierwszym wierszu tego elementu "div" nie został umieszczony w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"

Interpretacja selektora ::first-line

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

"Internet Explorer" w wersji wcześniejszej niż wersja "9" interpretuje zapis tylko z jednym znakiem dwukropek, czyli zapis ":first-line".

Edge

tak