Sélecteur universel en CSS : l'étoile qui cible tout, sans exception

Certains sélecteurs ciblent un élément précis, d'autres une famille entière. L'étoile va encore plus loin : elle cible absolument tout ce que contient la page, sans distinction de balise, de classe ou d'attribut.

C'est un outil rare au quotidien, mais qu'on croise dès les premières lignes de presque toutes les feuilles de style, en particulier dans les resets qui remettent les navigateurs sur un pied d'égalité avant de commencer à styliser un projet.

Définition

Le sélecteur universel, écrit avec le symbole *, cible tous les éléments du document, quel que soit leur type. Il peut aussi être limité à l'intérieur d'un élément précis, comme .carte * qui cible tout ce qui se trouve à l'intérieur d'une carte.

L'usage classique dans un reset

L'exemple le plus fréquent est l'application d'un box-sizing uniforme à toute la page, pour que les marges internes et les bordures n'agrandissent jamais la taille déclarée d'un élément.

/* reset minimal courant en début de feuille de style */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Cette règle est posée une seule fois, tout en haut de la feuille de style, puis oubliée : elle garantit un comportement prévisible pour le box-sizing sur toute la page, sans avoir à y repenser élément par élément.

Le mythe de la lenteur

Une idée reçue circule encore : le sélecteur universel serait lent parce qu'il oblige le navigateur à examiner chaque élément de la page. En réalité, les moteurs de rendu modernes évaluent un sélecteur de droite à gauche et optimisent ce cas précis très efficacement. Sur un site normal, la différence de performance entre * et un sélecteur plus ciblé est imperceptible, sauf sur des pages qui comptent des dizaines de milliers d'éléments, ce qui reste rare.

Où l'utiliser, où l'éviter

Le sélecteur universel garde tout son sens dans un reset global ou pour cibler tous les enfants directs d'un conteneur, par exemple pour poser un espacement uniforme. Il devient en revanche difficile à maîtriser dès qu'on l'utilise pour du style visuel précis, puisqu'il ne laisse aucune indication sur les éléments réellement concernés en lisant la règle.

Limiter l'étoile à un conteneur précis

Le sélecteur universel n'est pas obligatoirement global. Associé à un sélecteur de classe, .grille > * cible uniquement les enfants directs d'une grille, ce qui permet par exemple d'appliquer un espacement uniforme entre des cartes sans connaître à l'avance leur nombre ni leur balise. C'est une technique fréquente pour construire une mise en page flexible qui accepte n'importe quel contenu.

/* espace uniforme entre chaque enfant direct */
.grille > * + * {
  margin-left: 16px;
}

Cette dernière écriture combine l'étoile avec un combinateur frère adjacent : elle ajoute une marge à gauche de chaque élément sauf le tout premier, une astuce courante pour espacer une rangée d'éléments sans marge résiduelle sur les bords. On retrouve un usage comparable dans un CSS reset et normalize, où l'étoile sert de point de départ commun avant d'ajuster les exceptions au cas par cas.

Questions fréquentes

Non, pas de manière perceptible sur un site classique. Les navigateurs modernes gèrent ce cas efficacement, et le vrai coût de performance vient presque toujours d'ailleurs, comme des animations mal optimisées. Avant de soupçonner un sélecteur, mieux vaut profiler réellement la page pour identifier la source exacte d'un ralentissement perçu.

Oui, * { } est parfaitement valide et cible tous les éléments du document, même si une feuille de style vide n'a évidemment aucun effet visible.

Non, il faut les ajouter explicitement, comme dans *, *::before, *::after, car les pseudo-éléments ne sont pas inclus automatiquement par l'étoile seule.