::first-line (:first-line)

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 et font-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 et background-blend-mode
• word-spacing, letter-spacing, text-decoration, text-transform et line-height
• text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style et vertical-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.

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

Compatibilité des navigateurs

Voir aussi

• ::first-letter