Ostatnio edytowany:

::first-letter

Autor: Virtual Patriot

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.

Dodatkowe techniczne informacje 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"

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"

Interpretacja selektora ::first-letter

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

Edge

tak

Zobacz więcej informacji o interpretacji selektora .