Pseudo Élément CSS ::first-letter

❮ Précédent Suivant ❯

Le pseudo-élément ::first-letter applique un style à la première lettre dans un conteneur bloc. Il ne sélectionne pas des éléments en ligne, tels que des images ou des tableaux en ligne.

Le pseudo-élément ::first-letter n'identifie pas des signes de ponctuation précédant ou suivant immédiatement la première lettre. Il s'applique aussi si la première lettre est un nombre.

Quelques propriétés CSS peuvent être utilisées pour styler ::first-letter, elles sont:

propriétés de font
propriétés de margin
propriétés de padding
propriétés de border
propriétés de background
les propriétés text-decoration, text-transform, letter-spacing, word-spacing, float, vertical-align, color, line-height, text-shadow, box-shadow.

La spécification CSS3. a introduit ::first-letter pour distinguer les pseudo-classes des pseudo-éléments.

Version

CSS1

Syntaxe

::first-letter {
  css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p::first-letter {
      font-size: 35px;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::first-letter</h2>
    <p>Lorem ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Le pseudo-élément ::first-letter accepte des signes de ponctuation et des chiffres comme une première lettre :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p::first-letter {
      font-size: 35px;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::first-letter</h2>
    <p>-Lorem ipsum est simplement du faux texte...</p>
    <p>1Lorem ipsum est simplement du faux texte...</p>
  </body>
</html>