Pseudo Élément CSS ::first-letter

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:

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>

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>

Support de Navigateurs

9.0+ 12.0+ 3.5+ 5.1+ 12.1+


Trouvez-vous cela utile?

Articles Associées