*
L’astérisque correspond à chaque élément. Il sert aux réinitialisations de styles et aux règles qui visent tous les enfants d’un conteneur donné.
Exemple
#*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}<div class="stage" style="display: grid; gap: 6px;">
<h3>Carte sans marges par défaut</h3>
<p style="color: #a1a1aa;">Le titre et le paragraphe n’ont plus les espacements ajoutés par le navigateur. Vous décidez vous-même de chaque espacement, ici avec gap.</p>
</div>Définition et utilisation
#Le sélecteur universel * sélectionne chaque élément, quels que soient sa balise, ses classes et ses attributs. Utilisé seul, il touche tout le document, y compris html et body. Combiné à d’autres sélecteurs, il se limite au fragment choisi : .card > * désigne tous les enfants directs de la carte.
Il a une spécificité nulle (0, 0, 0), donc il n’ajoute rien au poids du sélecteur. La règle * { margin: 0 } perd face à n’importe quelle autre règle qui définit une marge. L’astérisque est aussi implicitement présent devant une classe ou un attribut isolé : .lead signifie la même chose que *.lead.
Vous le rencontrerez le plus souvent dans une réinitialisation de box-sizing et dans la règle d’espacement surnommée le « hibou » (* + *), qui ajoute une marge à chaque élément précédé d’un frère. Gardez à l’esprit que * ne couvre pas les pseudo-éléments, c’est pourquoi les réinitialisations listent séparément *::before et *::after.
Les inquiétudes sur la performance de l’astérisque lui-même sont aujourd’hui exagérées, mais des règles lourdes appliquées à tous les éléments, comme * { transition: all 0.3s }, peuvent ralentir une page et déclencher des animations indésirables.
Syntaxe
#* { propriété: valeur; }Exemples de sélecteurs
#- Littéralement tout, y compris
htmletbody, c’est pourquoi le contour en pointillés se voit même autour de tout l’aperçu. - Tous les descendants de
body, à toute profondeur, y compris lestrongdans le paragraphe et lelidans la liste. Les élémentshtmletbodyne correspondent plus. - Seulement les enfants directs du cadre : le titre, le paragraphe et la liste. Les éléments
strongetlise trouvent plus en profondeur. - Chaque enfant précédé d’un frère reçoit une marge en haut. Le premier reste sans espacement.
Exemples de sélecteurs en pratique
#*
html et body, c’est pourquoi le contour en pointillés se voit même autour de tout l’aperçu.* {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}body *
body, à toute profondeur, y compris le strong dans le paragraphe et le li dans la liste. Les éléments html et body ne correspondent plus.body * {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}.demo > *
strong et li se trouvent plus en profondeur..demo > * {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}.flow > * + *
.flow > * + * {
margin-top: 14px;
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}Plus d’exemples
#.flow > * + * {
margin-top: 12px;
}<style>:where(.flow > *) { margin: 0; }</style>
<article class="flow stage">
<h3>Module 2</h3>
<p>Chaque élément suivant reçoit un espacement par rapport au précédent.</p>
<p>Le premier élément n’a pas de marge en haut, donc rien ne s’écarte du bord du cadre.</p>
</article>L’écriture * + * rappelle une paire d’yeux, d’où le nom plaisant de « hibou ». La règle fonctionne pour n’importe quels éléments, sans les nommer un par un.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Placez la réinitialisation avec l’astérisque tout en haut de la feuille de style. Elle a un poids nul, donc toute règle ultérieure l’écrasera facilement.
- N’appliquez pas via
*des effets lourds, comme des transitions, des ombres ou des filtres. Ils toucheraient des centaines d’éléments, y compris ceux que vous ne voyez pas. - Plutôt que
.card *(tous les descendants),.card > *(seulement les enfants) suffit généralement. La règle est alors plus prévisible.
Entrées associées
#- Sélecteur de typeSélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
- A > BLe signe > sélectionne les éléments B qui sont des enfants directs de l’élément A, c’est-à-dire situés exactement un niveau plus bas.
- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- box-sizingDécide si width et height incluent la marge intérieure et la bordure.
- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.