::first-letter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* Sélectionne la première lettre */
/* d'un élément <p> */
p::first-letter {
  color: red;
  font-size: 130%;
}

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édant 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 du 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 peut 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 lettre n'a de signification que dans une 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.

Propriétés utilisables

Seul un petit sous-groupe de propriétés 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.

Note : Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles 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

Error: could not find syntax for this item

Exemples

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

CSS

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

HTML

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

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi