Autor publikacji: Virtual Patriot - Administrator

::first-letter

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

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

Przeznaczenie selektora `::first-letter`

      ::first-letter { ... }

Za pomocą selektora ::first-letter możemy sprawić, że pierwsza litera tekstu znajdującego się w pierwszym wierszu interesującego nas elementu HTML zostanie umieszczona w dodatkowym pseudoelemencie.

Informacje techniczne o selektorze `::first-letter`

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, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align, margin, padding, border, color, background.

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-letter".

Przykładowa reguła CSS, selektor `::first-letter`

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

Wyjaśnienie przykładowej reguły CSS

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

p::first-letter: spraw, aby pierwsza litera tekstu znajdującego 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-letter {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "div" nie została umieszczona w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
    </div>

    <p>
      pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "p" została umieszczona w dodatkowym pseudoelemencie oraz jest koloru czerwonego, ponieważ ten element HTML jest elementem "p"
    </p>

    <div>
      pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "div" nie została umieszczona w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
    </div>

  </body>
</html>

Rezultat

pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "div" nie została umieszczona w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"

pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "p" została umieszczona w dodatkowym pseudoelemencie oraz jest koloru czerwonego, ponieważ ten element HTML jest elementem "p"

Interpretacja selektora `::first-letter`

tak

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

tak

Zobacz więcej informacji o interpretacji selektora ::first-letter.