logo oujood
🔍

Le sélecteur :header en jQuery

Ciblez tous les éléments h1 à h6 en une seule instruction jQuery

OUJOOD.COM

À quoi sert le sélecteur :header ?

En jQuery, le sélecteur :header cible d'un coup tous les éléments de titre d'une page : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Sans lui, il faudrait les lister manuellement à chaque fois — ce qui devient vite fastidieux dès qu'on veut appliquer un style ou un comportement global.

C'est une extension propre à jQuery, pas un sélecteur CSS natif. Concrètement, ça change surtout les performances (on y revient plus bas), mais pour la plupart des usages courants, ça ne pose aucun problème.

Syntaxe

$(":header")

Exemple 1 — Appliquer une couleur de fond à tous les titres

Le cas le plus simple : on attend que le DOM soit chargé, puis on applique une couleur d'arrière-plan verte à tous les titres présents dans la page.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery - Sélectionner tous les titres</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    /* :header cible h1, h2, h3, h4, h5 et h6 en une seule fois */
    $(":header").css("background-color", "#aaff00");
  });
  </script>
</head>
<body>
  <h1>Bienvenue sur mon site</h1>
  <p>Premier paragraphe de contenu.</p>
  <p>Deuxième paragraphe de contenu.</p>
  <p>Troisième paragraphe de contenu.</p>
</body>
</html>

Exemple 2 — Combiner plusieurs propriétés CSS

On peut passer un objet à .css() pour modifier plusieurs propriétés en même temps. Ici, fond gris et texte bleu sur tous les titres :

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery - Styliser plusieurs propriétés</title>
  <style>
    body { font-size: 14px; font-family: Arial, sans-serif; }
    h1, h2 { margin: 6px 0; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    /* On passe un objet pour appliquer background et color en une fois */
    $(":header").css({ background: "#CCC", color: "blue" });
  });
  </script>
</head>
<body>
  <h1>Mon titre principal</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h2>Mon sous-titre</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

Performance : ce que vous devez savoir

:header n'est pas un sélecteur CSS standard. Le navigateur ne peut donc pas le traiter via son moteur natif querySelectorAll() — jQuery doit faire le travail lui-même, ce qui est un peu plus lent.

Dans la pratique, il existe deux façons d'écrire quelque chose d'équivalent mais plus rapide :

  • Utiliser directement les sélecteurs CSS natifs : $("h1, h2, h3, h4, h5, h6") — plus verbeux, mais optimisé nativement par le navigateur.
  • Filtrer depuis une sélection existante : $("*").filter(":header") — utile quand le contexte impose de passer par jQuery. Voir la doc officielle de .filter().

Sur une page avec peu de titres, la différence ne se mesure pas. Sur une page très longue avec beaucoup de DOM, préférer la version native.

Quelques usages concrets

En dehors du simple stylage, :header sert souvent à générer une table des matières automatiquement en parcourant le DOM, à ajouter des ancres de navigation sur chaque titre, ou à animer les en-têtes au défilement. Bref, tout ce qui nécessite de traiter l'ensemble des titres sans distinguer leur niveau.

   Sommaire   

Par carabde | Mis à jour le 12 mai 2026