:: première lettre - Astuces CSS

::first-letterest un pseudo élément qui vous permet de styliser la première lettre d'un élément, sans avoir à coller une balise autour de cette première lettre dans votre HTML. Bien qu'aucune balise ne soit ajoutée au DOM, c'est comme si la première lettre ciblée était englobée dans une balise. Vous pouvez styliser cette première lettre comme vous le feriez pour un élément réel avec:

p::first-letter ( font-weight: bold; color: red; )


The first letter is bold and red

Le résultat est comme si vous aviez un faux élément autour de la première lettre:


The first letter is bold and red.

La première lettre est grasse et rouge

Le pseudo élément ne fonctionne que si l'élément parent est une boîte de conteneur de bloc (en d'autres termes, il ne fonctionne pas sur la première lettre des display: inline;éléments.)
Si vous avez à la fois un ::first-letteret ::first-linesur un élément, la première lettre héritera des styles de première ligne, mais les styles sur le ::first-letterremplaceront en cas de conflit de styles.
Si vous générez du contenu avec ::before, la première lettre ou le caractère de ponctuation, qu'il fasse partie du nœud de texte d'origine ou créé avec le contenu généré, sera la cible.

Plus d'information

Lorsque vous utilisez pour les lettrines, utilisez en conjonction avec p:first-of-typepour que chaque première lettre ne soit pas stylée
Exemple de stylo - avec contenu généré
Wiki W3C
Module Sélecteurs CSS3 du W3C

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.