Le ::first-linepseudo-élément sert à appliquer des styles à la première ligne d'un élément. Imaginez un paragraphe de plusieurs lignes (comme celui-ci!). ::first-linevous permet de styliser cette première ligne de texte. Vous pouvez l'utiliser pour l'agrandir ou le définir en petites majuscules comme choix stylistique. La quantité de texte ciblée par ce pseudo-élément dépend de plusieurs facteurs tels que la longueur de la ligne, la largeur de la fenêtre d'affichage, la taille de la police, l'espacement des lettres, l'espacement des mots. Dès que la ligne saute, le texte qui suit n'est plus sélectionné. Notez qu'aucun élément DOM réel n'est sélectionné ici (donc élément «pseudo»).
Cette pseudo-élément ne fonctionne que sur des éléments de type bloc (lorsque displayest réglé sur block, inline-block, table-caption, table-cell). S'il est défini sur un élément en ligne, rien ne se passe, même si cet élément en ligne comporte un saut de ligne.
Notez également que toutes les propriétés ne peuvent pas être utilisées dans un ensemble de règles contenant ::first-line. La plupart:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )La spécification CSS officielle indique aux agents utilisateurs peuvent autoriser d'autres propriétés s'ils en ont envie:
Les UA peuvent également appliquer d'autres propriétés.
Un mot sur la spécificité
La démo suivante montre comment il ::first-lineest possible de remplacer tout type de spécificité, même !important.
- Le premier parapgraphe est mis en gris via un sélecteur de balises
- Le 2ème parapgraphe est mis en gris via un sélecteur de classe
- Le 3ème parapgraphe est mis en gris via un sélecteur d'ID
- Le 4ème parapgraphe est mis en gris grâce à un! Important bash
En effet, le pseudo-élément est traité comme un élément enfant, et pas seulement comme une partie de l'élément parent. Les règles que vous y appliquez ne sont donc que pour cela, les règles parentes peuvent simplement y arriver.
Essayez également de redimensionner votre navigateur pour voir comment se comporte le pseudo-élément lorsque la largeur de la fenêtre change.
Il n'y a pas de: last-line ou: nth-line, même si ce serait cool.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Ouais | Ouais | Ouais | 3.5+ (ancien) 9+ | 5.5+ (ancien) 9+ | Ouais | Ouais |
Puisqu'il ::first-lines'agit d'un pseudo-élément, il doit être précédé de deux deux points comme spécifié dans CSS2.1. Cependant, certains navigateurs ne prennent en charge que la syntaxe à deux points (Internet Explorer 5.5 - 9 et Opera 3.5 - 9).