W3docs
fr
Se connecter

CSS ::first-line Pseudo-élément

Utilisez le pseudo-élément CSS ::first-line pour sélectionner et styliser la première ligne d'un conteneur de niveau bloc. Exemples et propriétés.

Le pseudo-élément ::first-line applique des styles à la première ligne d'un conteneur de niveau bloc. Il ne sélectionne pas les éléments de niveau en ligne, tels que les images ou les tableaux en ligne.

Il est le plus souvent utilisé pour des touches typographiques que les journaux et les magazines appliquent à la ligne d'ouverture d'un article — une couleur différente, des petites majuscules ou un espacement supplémentaire des lettres — sans envelopper cette ligne dans un balisage supplémentaire. Parce que la « première ligne » dépend de la largeur de l'élément, de la taille de la police et du viewport de l'utilisateur, la partie stylisée est recalculée par le navigateur à mesure que la mise en page change.

Seul un ensemble spécifique de propriétés CSS peut être appliqué à ::first-line. La liste complète est détaillée dans la section Propriétés autorisées ci-dessous.

Le pseudo-élément ::first-letter hérite uniquement des propriétés applicables à ::first-line. Pour toutes les autres propriétés, il hérite de l'élément parent. Si les deux pseudo-éléments sont utilisés, les styles définis sur ::first-letter remplacent ceux hérités de ::first-line.

Le pseudo-élément ::first-line peut également être écrit avec deux-points simple (:first-line), ce qui est pris en charge par tous les navigateurs.

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Propriétés autorisées

Le pseudo-élément ::first-line n'accepte que certaines propriétés CSS. Voici ces propriétés :

Spécificité et héritage du pseudo-élément ::first-line

Le texte de la première ligne hérite uniquement des propriétés applicables au pseudo-élément ::first-line. Pour toutes les autres propriétés, il hérite de l'élément parent. Par exemple, le pseudo-élément ::first-letter hérite des styles appliqués par le pseudo-élément ::first-line.

Le pseudo-élément ::first-line a une spécificité plus élevée que le sélecteur d'élément de base, donc ses styles remplacent les déclarations normales sur l'élément. Cependant, les règles CSS standard !important s'appliquent toujours selon les règles de cascade normales.

Syntaxe

Exemple de syntaxe CSS ::first-line

::first-line {
  css declarations;
}

Exemple du pseudo-élément ::first-line :

Exemple de code CSS ::first-line

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>
Essayez vous-même »

Dans cet exemple, seuls les mots qui tombent sur la première ligne rendue du paragraphe deviennent bleu clair et en majuscules. Redimensionnez la fenêtre et la portion stylisée change automatiquement, car ::first-line suit la ligne que le navigateur met réellement en page, et non un nombre fixe de caractères.

Résultat

Propriété CSS ::first-line

Points importants à retenir

  • Seuls les conteneurs de niveau bloc répondent. Appliquer ::first-line à un élément en ligne (comme un <span> ou un <a> qui n'a pas été rendu display: block) n'a aucun effet.
  • La ligne est dynamique. Il n'existe aucun moyen de cibler un nombre fixe de caractères — si le viewport, la police ou le remplissage change, le navigateur recalcule quel texte appartient à la première ligne et le restylise en conséquence.
  • La prise en charge des propriétés est restreinte. Les propriétés affectant la mise en page (telles que margin, padding, border ou width) sont ignorées sur ::first-line. Utilisez uniquement les propriétés listées dans Propriétés autorisées.
  • L'ordre compte avec ::first-letter. Lorsque vous stylisez les deux, déclarez-les de façon à ce que le résultat souhaité soit clair : les styles de ::first-letter remplacent les propriétés correspondantes héritées de ::first-line. Pour le style de lettrine, consultez le pseudo-élément ::first-letter.

Pratique

Pratique
À quoi peut s'appliquer le sélecteur de pseudo-élément ::first-line en CSS ?
À quoi peut s'appliquer le sélecteur de pseudo-élément ::first-line en CSS ?
Was this page helpful?