Le pseudo-élément ::first-line
applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line
ne ciblent pas un élément HTML réel.
/* Sélectionne la première ligne */
/* d'un élément <p> */
::first-line {
color: red;
text-transform: uppercase;
}
Une première ligne n'a de sens que dans une boîte de type bloc, et ainsi le pseudo-élément ::first-line
n'a d'effet que sur les éléments dont display
à une valeur de block
, inline-block
, table-cell
ou table-caption
. Dans tous les autres cas, ::first-line
n'a pas d'effet.
Propriétés utilisables
Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément ::first-line
:
- Toutes les propriétés liées aux polices de caractères :
font
,font-kerning
,font-style
,font-variant
,font-variant-numeric
,font-variant-position
,font-variant-east-asian
,font-variant-caps
,font-variant-alternates
,font-variant-ligatures
,font-synthesis
,font-feature-settings
,font-language-override
,font-weight
,font-size
,font-size-adjust
,font-stretch
etfont-family
- La propriété
color
- Toutes les propriétés liées à l'arrière-plan :
background-color
,background-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
etbackground-blend-mode
word-spacing
,letter-spacing
,text-decoration
,text-transform
etline-height
text-shadow
,text-decoration
,text-decoration-color
,text-decoration-line
,text-decoration-style
etvertical-align
.
Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.
Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.
Si les navigateurs anciens doivent être supportés,
:first-line
est le seul choix viable ; sinon,::first-line
est préféré.Syntaxe
/* CSS3 syntax */ ::first-line /* CSS2 syntax */ :first-line
Exemples
text-transform
Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.
CSS
p::first-line {
text-transform: uppercase;
}
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.
</p>
Résultat
margin-left
Ici, l'effet est nul car margin-left
ne peut pas être appliquée sur ce pseudo-élément.
CSS
p::first-line {
margin-left: 20px;
}
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.
</p>
Résultat
text-indent
Là encore, l'effet est nul, text-indent
ne peut pas être appliqué sur ce pseudo-élément.
CSS
p::first-line {
text-indent: 20px;
}
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.
</p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Pseudo-Elements Level 4 La définition de '::first-line' dans cette spécification. |
Version de travail | La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et opacity ). Définit l'héritage de ::first-letter . |
CSS Text Decoration Module Level 3 La définition de 'text-shadow with ::first-line' dans cette spécification. |
Candidat au statut de recommandation | La propriété text-shadow peut être utilisée avec ::first-letter . |
Selectors Level 3 La définition de '::first-line' dans cette spécification. |
Recommendation | La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points. |
CSS Level 2 (Revision 1) La définition de '::first-line' dans cette spécification. |
Recommendation | Aucune modification. |
CSS Level 1 La définition de '::first-line' dans cette spécification. |
Recommendation | La définition initiale qui utilise la syntaxe avec un seul caractère deux-points. |
Compatibilité des navigateurs
BCD tables only load in the browser