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 :

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.

Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1
Notes
Support complet 1
Notes
Notes Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Support complet 1
Notes Autre nom
Notes Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
Edge Support complet Oui
Support complet Oui
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
Firefox Support complet 1
Support complet 1
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
IE Support complet 9
Support complet 9
Support complet 5.5
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
Opera Support complet 7
Notes
Support complet 7
Notes
Notes From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Support complet 3.5
Notes Autre nom
Notes From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
Safari Support complet 1
Notes
Support complet 1
Notes
Notes The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Support complet 1
Notes Autre nom
Notes The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
WebView Android Support complet OuiChrome Android ? Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
Firefox Android Support complet 4
Support complet 4
Support complet 4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :first-line
Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Yann Dìnendal, tregagnon, teoli, louuis, wakka27, FredB
Dernière mise à jour par : SphinxKnight,