Exemple de l’utilisation de :first-letter

La pseudo élément :first-letter permet d’agir en CSS uniquement sur la première lettre de l’élément visé de la façon suivante :

h3:first-letter {font-size: 4em; color: red;}

Cas où le pseudo élément :first-letter ne fonctionne pas

:first-letter ne va pas fonctionner si :

  • Le premier élément du bloc sélectionné (dans notre exemple ci dessus un h3) n’est pas une lettre (s’il y a une image, ou une icône avant la première lettre)
  • Si le bloc sélectionné n’est pas de type block . Par exemple ce pseudo élément ne va pas fonctionner sur un élément span. Dans ce cas, il existe cependant une solution qui est d’assigner la propriété block au span.

    Exemple ci dessous pour un span de class « span-block »
span.span-block:first-letter {color:red;}
span.span-block {display: block;}

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.