:first-letter


:first-letter est un pseudo élément qui vous permet d’appliquer un style à la première lettre dans un élément, sans avoir besoin de recourir à un <span> dans votre HTML. Bien qu’aucune balise ne soit ajoutée au DOM, tout se passe comme si la première lettre était comprise dans une balise <first-letter>.

//CSS
p:first-letter {
  font-weight: bold;
  color: red;
}

//HTML
<p>
 La première lettre est rouge et en gras
</p>

C’est donc comme si on avait (à ne pas faire) :

//Faux HTML
<p>
 <firstletter>L</firstletter>
 a première lettre est rouge et en gras
</p>
  • Le pseudo élément ne fonctionne que si l’élément parent est un bloc (en d’autres termes, il ne fonctionne pas sur la première lettre des éléments display: inline;).
  • Si vous avez à la fois :first-letter et :first-line sur un élément, la première lettre héritera du style de la première ligne, mais les styles de :first-letter primeront en cas de conflit.
  • Si vous générez du contenu avec :before, la première lettre ou le premier caractère de ponctuation, qu’il fasse partie du texte d’origine ou du contenu généré, sera ciblé.

Voici quelques exemples sur CodePen :

See the Pen ::first-letter by Estelle Weyl (@estelle) on CodePen.


Autres ressources à consulter sur ce sujet :


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.