::first-letter

Le pseudo-élément ::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 qu'une seule signification dans la boîte englobante, 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 pérenne.

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.

Syntaxe

/* CSS3 syntax */
::first-letter { style properties }

/* CSS2 syntax */
:first-letter { style properties }

Exemples

Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.

CSS

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

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
  nulla facilisi.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

Résultat

Spécifications

Spécification Statut Commentaire
CSS Pseudo-Elements Level 4
La définition de '::first-letter' dans cette spécification.
Version de travail Généralisation des propriétés permises pour la mise en form du texte et des popriétés de mise en page en-ligne, opacity et box-shadow.
CSS Text Decoration Level 3
La définition de 'text-shadow avec ::first-letter' dans cette spécification.
Candidat au statut de recommandation Autorise l'usage de text-shadow avec ::first-letter.
Selectors Level 3
La définition de '::first-letter' dans cette spécification.
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)
La définition de '::first-letter' dans cette spécification.
Recommendation CSS Level 2 utilisait la syntaxe à un caractère deux-points.
CSS Level 1
La définition de '::first-letter' dans cette spécification.
Recommendation La définition initiale utilisait la syntaxe à un caractère deux-points.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) 9.0 7.0 1.0 (85)
Ancienne syntaxe (:first-letter) 1.0 1.0 (1.7 ou moins) 5.5 3.5 1.0 (85)
Prise en charge du digraphe néerlandais IJ Pas de support Pas de support bug 92176  Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? 1.0 (1) Pas de support ? ?
Ancienne syntaxe (:first-letter) ? 1.0 (1) ? ? ?
Prise en charge du digraphe néerlandais IJ ? Pas de support ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, tregagnon, teoli, louuis, FredB
 Dernière mise à jour par : SphinxKnight,