::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 juillet 2015.
* Some parts of this feature may have varying levels of support.
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.
Exemple interactif
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p>
Des scientifiques explorant les profondeurs de la baie de Monterey ont fait la
découverte inattendue d'une espèce rare et unique de poisson dragon. Cette
espèce est la plus rare de son genre.
</p>
<p>
Lorsque Robison et une équipe de chercheurs ont découvert ce poisson, ils
participaient à une expédition d'une semaine.
</p>
La première lettre d'un élément n'est pas toujours triviale à identifier :
- La ponctuation qui précède ou suit immédiatement la première lettre est incluse dans la correspondance. La ponctuation comprend tout caractère Unicode défini dans les classes open (Ps), close (Pe), initial quote (Pi), final quote (Pf) et other punctuation (Po).
- Certaines langues ont des digraphes qui sont toujours capitalisés ensemble, comme le
IJen néerlandais. Dans ces cas, les deux lettres du digraphe doivent être correspondantes par le pseudo-élément::first-letter. - Une combinaison du pseudo-élément
::beforeet de la propriétécontentpeut injecter du texte au début de l'élément. Dans ce cas,::first-lettercorrespondra à la première lettre de ce contenu généré.
Note :
CSS a introduit la notation ::first-letter (avec deux deux-points) pour distinguer pseudo-classes des pseudo-elements. Pour des raisons de compatibilité, les navigateurs acceptent également :first-letter, introduit plus tôt.
La prise en charge des digraphes tels que IJ en néerlandais est faible. Consultez le tableau de compatibilité ci-dessous pour voir l'état actuel de la prise en charge.
Propriétés autorisées
Seul un petit sous-ensemble de propriétés CSS peut être utilisé avec le pseudo-élément ::first-letter :
- Toutes les propriétés de police :
font,font-style,font-feature-settings,font-kerning,font-language-override,font-stretch,font-synthesis,font-variant,font-variant-alternates,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-weight,font-size,font-size-adjust,line-heightetfont-family - Toutes les propriétés d'arrière-plan :
background,background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachmentetbackground-blend-mode - Toutes les propriétés de marge :
margin,margin-top,margin-right,margin-bottom,margin-left - Toutes les propriétés de remplissage :
padding,padding-top,padding-right,padding-bottom,padding-left - Toutes les propriétés de bordure : les raccourcis
border,border-style,border-color,border-width,border-radius,border-imageet les propriétés longues - La propriété
color - Les propriétés CSS
text-decoration,text-shadow,text-transform,letter-spacing,word-spacing(le cas échéant),line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,vertical-align(uniquement si la valeur defloatestnone)
Syntaxe
::first-letter {
/* ... */
}
Exemples
Lettre en tête de ligne
Dans cet exemple, nous allons utiliser le pseudo-élément ::first-letter pour créer un effet de lettrine sur la première lettre du paragraphe qui suit immédiatement le <h2>.
HTML
<h2>Mon titre</h2>
<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.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
CSS
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
Résultat
Effet sur la ponctuation spéciale et les caractères non latins
Cet exemple illustre l'effet de ::first-letter sur la ponctuation spéciale et les caractères non latins.
HTML
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</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>
CSS
p::first-letter {
color: red;
font-size: 150%;
}
Résultat
Mise en forme de la première lettre dans un élément de texte SVG
Dans cet exemple, nous utilisons le pseudo-élément ::first-letter pour styliser la première lettre d'un élément SVG <text>.
Note : Au moment de la rédaction, cette fonctionnalité a un support limité.
HTML
<svg viewBox="0 0 300 40">
<text y="30">Première lettre dans un <text> SVG</text>
</svg>
CSS
text {
font-family: sans-serif;
}
text::first-letter {
font-family: serif;
font-size: 2rem;
font-weight: 600;
fill: tomato;
stroke: indigo;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |
Compatibilité des navigateurs
Loading…