CSS ::first-letter Pseudo-élément

Le pseudo-élément ::first-letter applique des styles à la première lettre de la première ligne d'un conteneur de niveau bloc. Il est le plus souvent utilisé pour créer des lettrines et d'autres effets typographiques de lettre initiale, comme les grandes lettres ornées qui ouvrent un chapitre dans un livre imprimé.

Le pseudo-élément ne prend effet que lorsque la propriété display de l'élément est block, inline-block, list-item, table-cell ou table-caption. Il n'a aucun effet sur les éléments en ligne tels que <span> ou les images, car ils ne commencent pas une nouvelle ligne.

Lorsqu'une ponctuation (comme des guillemets, des crochets ou un tiret) précède ou suit immédiatement la première lettre, cette ponctuation est incluse dans la correspondance avec la lettre. Le pseudo-élément cible la première unité de lettre typographique, donc un symbole ou un chiffre en tête est stylisé avec la lettre qui le suit.

Info

CSS3 a introduit la syntaxe à double deux-points (::first-letter) pour distinguer les pseudo-éléments des pseudo-classes. L'ancienne forme à simple deux-points (:first-letter) est toujours acceptée par les navigateurs pour la compatibilité ascendante, mais la forme à double deux-points est préférée dans le code moderne.

Quand l'utiliser

Utilisez ::first-letter lorsque vous souhaitez :

Créer une lettrine — agrandir et faire flotter la lettre d'ouverture d'un article ou d'un chapitre.
Appliquer une couleur, police ou graisse distincte au caractère initial d'un titre ou d'un paragraphe.
Reproduire une typographie de style imprimé sur le web sans envelopper le premier caractère dans du balisage supplémentaire.

Comme l'effet est purement présentationnel, votre HTML reste propre : il n'est pas nécessaire d'ajouter un <span class="first"> autour de la lettre.

Propriétés autorisées

Voici les propriétés CSS utilisables avec le pseudo-élément ::first-letter :

Propriétés de police : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height et font-family.

Propriétés d'arrière-plan : background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image et background-clip.

Propriétés de marge : margin, margin-top, margin-right, margin-bottom, margin-left.

Propriétés de rembourrage : padding, padding-top, padding-right, padding-bottom, padding-left.

Propriétés de bordure : abréviations, border-style, border-color, border-width, border-radius, border-image, propriétés individuelles.

La propriété color.

Les propriétés text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (le cas échéant), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (uniquement float: none;).

Version

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Syntaxe

Exemple de syntaxe CSS ::first-letter

::first-letter {
  css declarations;
}

Exemple du pseudo-élément ::first-letter :

Exemple de code CSS ::first-letter

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Essayez vous-même »

Résultat

La première lettre du paragraphe est rendue à 35px et en bleu, tandis que le reste du texte conserve sa taille et sa couleur par défaut.

Exemple du pseudo-élément ::first-letter avec un signe de ponctuation et un chiffre :

Dans l'exemple suivant, le premier paragraphe commence par un tiret et le second par un chiffre. Remarquez comment le tiret initial est stylisé avec la première lettre, tandis qu'un chiffre initial est stylisé seul en tant que premier caractère de la ligne.

Exemple de code ::first-letter

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Essayez vous-même »

Exemple de lettrine :

Un usage classique de ::first-letter est la lettrine, où la lettre d'ouverture est agrandie et mise en flottant pour que les lignes suivantes s'enroulent autour d'elle. Combinez un grand font-size, float: left et un peu de padding pour obtenir l'effet.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 3em;
        font-weight: bold;
        color: #1c87c9;
        float: left;
        padding-right: 8px;
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <p>
      Drop caps draw the reader's eye to the start of a paragraph. They
      are a long-standing typographic tradition, and CSS lets you add them
      with no extra markup at all.
    </p>
  </body>
</html>

Ressources associées

CSS ::first-line — styliser toute la première ligne plutôt que la première lettre seulement.
CSS float — nécessaire pour enrouler le texte autour d'une lettrine.
CSS text-transform — à combiner avec ::first-letter pour mettre en majuscule le caractère d'ouverture.

Pratique

Comment fonctionne le sélecteur pseudo-élément CSS ::first-letter ?

Il sélectionne et stylise la première lettre de chaque paragraphe.Il sélectionne et stylise la dernière lettre de chaque paragraphe.Il peut être utilisé avec des éléments de niveau bloc et des cellules de tableau.Il peut être utilisé pour sélectionner et styliser la première lettre de chaque mot d'un paragraphe.