:first-line


Le pseudo-élément :first-line sert à appliquer des styles à la première ligne d’un élément. Imaginez un paragraphe long de plusieurs lignes (comme celui-ci !). :first-line vous permet d’appliquer un style à cette première ligne de texte. Vous pourriez l’utiliser par exemple pour l’agrandir, ou la transformer en petites capitales. La quantité de texte ciblée par ce pseudo-élément dépend de plusieurs facteurs, comme la longueur de ligne, la largeur du viewport, la taille de la police de caractères, l’espacement des lettres et des mots. Dès qu’on passe à la ligne suivante, le texte n’est plus sélectionné. Remarquez que ce n’est pas un élément du DOM en tant que tel qui est ciblé — d’où le “pseudo” élément).

Ce pseudo-élément ne marche qu’avec des éléments de niveau bloc (lorsque display a pour valeur block, inline-bloc, table-caption ou table-cell). Appliqué sur un élément inline, rien ne se passera, même si cet élément inline présente un saut de ligne.

Remarquez également que l’on ne peut pas utiliser toutes les propriétés à l’intérieur d’une règle contenant :first-line, mais principalement :

//CSS
.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 que les agents utilisateurs (User Agents) — c’est à dire les navigateurs — peuvent autoriser d’autres propriétés de leur choix.

Un mot sur la spécificité

La démo qui suit montre comment :first-line écrase toute autre spécificité, même !important :

  • Le corps de texte du 1er paragraphe est gris, via un sélecteur balise
  • Le corps de texte du 1er paragraphe est gris, via un sélecteur classe
  • Le corps de texte du 1er paragraphe est gris, via un sélecteur id
  • Le corps de texte du 1er paragraphe est gris, via une injonction !important

See the Pen first-line pseudo-element by Pierre Choffe (@pierrechoffe) on CodePen.


Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.