::first-letter

Résumé

Le pseudo-élément CSS ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

La première lettre d'un élément n'est pas forcément évidente à identifier :

  • La ponctuation, c'est à dire n'importe quel caractère défini dans une des classes Unicode open (Ps), close (Pe), initial quote (Pi), final quote (Pf) et other punctuation (Po) , précédent ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.
  • D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le IJ en néerlandais. Dans ces rares cas, les deux lettres di digraphes doivent être sélectionnées par le pseudo-élément ::first-letter . (Ceci est mal supporté par les navigateurs, reportez vous au tableau de compatibilité des navigateurs).
  • Enfin, une combinaison du pseudo-élément ::before et de la propriété content peuvent injecter du texte au début de l'élément. Dans ce cas, ::first-letter sélectionnera la première lettre du contenu inséré.

Une première ligne a un sens unique dans la boîte contenante bloc, ainsi le pseudo-élément ::first-letter n'a un effet que sur les éléments ayant une valeur display correspondant à block, inline-block, table-cell, list-item ou table-caption. Dans tous les autres cas, ::first-letter n'a pas d'effet.

Seul un petit sous-groupe de propriété CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément ::first-letter :

Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS résistant au futur.

Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elle aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.

Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.

Si les navigateurs anciens doivent être supportés, :first-letter est le seul choix viable. Sinon, la syntaxe ::first-letter doit être privilégiée.

Exemples

/* agrandir et mettre en rouge les premières lettres de chaque paragraphe */

p:first-letter { 
  color: red; 
  font-size: 130%; 
}

Spécifications

Spécification Statut Commentaire
Selectors Level 3 Recommendation Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais IJ)
CSS Level 2 (Revision 1) Recommendation CSS Level 2 utilisait la syntaxe à un caractère deux-points.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 1.0 (1.7 ou moins) 9.0 7.0 1.0 (85)
Ancienne syntaxe (:first-line) 1.0 1.0 (1.7 ou moins) 5.5 3.5 1.0 (85)
Support du digraphe néerlandais IJ Pas de support Pas de support Pas de support Pas de support Pas de support
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? 1.0 (1) Pas de support ? ?
Ancienne syntaxe (:first-line) ? 1.0 (1) ? ? ?
Support du digraphe néerlandais IJ ? Pas de support ? ? ?

 

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale