:heading()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction de pseudo-classe CSS :heading() représente tous les éléments de titre qui correspondent à une valeur calculée à l'aide de la notation An+B. Cela vous permet de mettre en forme des éléments à des niveaux de titre spécifiques en même temps, plutôt que de les correspondre et de les mettre en forme individuellement.

Note : La fonction :heading() a la même spécificité qu'un sélecteur de classe, c'est-à-dire 0-1-0. Ainsi, :heading() aurait une spécificité de 0-1-0, et section:heading() aurait une spécificité de 0-1-1.

Syntaxe

css

:heading([ <An+B> [, <An+B>]* | even | odd ]) {
  /* ... */
}

Paramètres

La fonction pseudo-classe :heading() prend une liste séparée par des virgules d'expressions An+B ou de valeurs de mots-clés qui décrivent un modèle pour faire correspondre les éléments de titre.

Valeurs de mots-clés

odd: Représente les éléments de titre dont la position numérique est impaire : <h1>, <h3>, et <h5>.
even: Représente les éléments de titre dont la position numérique est paire : <h2>, <h4>, et <h6>.

Notation fonctionnelle

<An+B>

Représente les éléments de titre dont la position numérique correspond au modèle An+B, pour chaque valeur entière positive ou nulle de n, où :

A est une taille de pas entière,
B est un décalage entier,
n est tous les entiers non négatifs, à partir de 0.

Cela peut être lu comme le An+B-ème élément d'une liste. Les valeurs de A et B doivent toutes deux avoir des valeurs <integer>.

<h1>Entête 1</h1>
<h2>Entête 2</h2>
<h3>Entête 3</h3>
<h4>Entête 4</h4>

css

:heading(odd) {
  color: tomato;
}
:heading(even) {
  color: slateblue;
}

Utilisation de la notation `An+B`

html

<h1>Science</h1>
<h2>Physiques</h2>
<h3>Physique atomique, moléculaire et optique</h3>
<h4>Physique optique</h4>
<h5>Raysons X</h5>
<h6>Découverte</h6>

main {
  display: flex;
  justify-content: space-around;
}

css

/* Cible les titres <h3> et <h4> */
:heading(3, 4) {
  font-weight: 100;
}
/* Cible les titres dans l'ordre inverse à partir de <h3> */
:heading(-n + 3) {
  color: tomato;
}
/* Cible chaque troisième titre à partir de <h1> */
:heading(3n + 1) {
  font-style: italic;
}
/* Cible les titres après le niveau 5 */
:heading(n + 5) {
  color: slateblue;
}

Dans cet exemple :

:heading(3, 4) correspond aux éléments <h3> et <h4>
:heading(-n + 3) correspond aux éléments de titre dans l'ordre inverse, donc <h3>, <h2> et <h1>
:heading(3n + 1) correspond à chaque troisième élément de titre (3n) à partir de <h1>, donc cela inclurait <h1> et <h4>
:heading(n + 5) correspond aux éléments de titre à partir de <h5> et inclura <h6>