Autor publikacji: Virtual Patriot - Administrator

::first-line

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - the ::first-line pseudo-element (LV3)

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.

Informacje techniczne 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`

tak

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

tak