Élément pseudo CSS ::first-line

L'élément pseudo ::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.

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.

L'élément pseudo ::first-letter n'hérite que 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 éléments pseudo sont utilisés, les styles définis sur ::first-letter remplacent ceux hérités de ::first-line.

L'élément pseudo ::first-line peut également s'écrire avec un seul deux-points (: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

L'élément pseudo ::first-line n'accepte que certaines propriétés CSS. Voyons-les :

Toutes les propriétés liées à la police : font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, et font-family.
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.
Certaines propriétés utilisées pour le style du texte : text-shadow, text-decoration, text-decoration-color, text-decoration-line, et text-decoration-style.
La propriété CSS color.
word-spacing, line-height, letter-spacing, text-transform, et white-space.

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

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

L'élément pseudo ::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

css

::first-line {
  css declarations;
}

Exemple de l'élément pseudo ::first-line :

Exemple de code CSS ::first-line

html

<!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>

Try it Yourself »

Résultat

Propriété CSS ::first-line

Pratique

À quoi peut-on appliquer le sélecteur d'élément pseudo ::first-line en CSS ?

Éléments de niveau blocÉléments en ligneÉléments avec les éléments pseudo ::before et ::afterÉléments définis en flottant

Élément pseudo CSS ::first-line ​

Version ​

Propriétés autorisées ​

Spécificité et héritage de l'élément pseudo ::first-line ​

Syntaxe ​

Exemple de l'élément pseudo ::first-line : ​

Résultat ​

Pratique ​