Sélecteur CSS *
Le sélecteur CSS * sélectionne tous les éléments. Il peut aussi cibler tous les éléments à l'intérieur d'un autre élément. Exemples inclus.
Le sélecteur * (astérisque) est le sélecteur universel. Il correspond à chaque élément du
document, quel que soit son type, son id ou sa classe.
On fait généralement appel à * dans deux situations : pour appliquer un style de base à tout ce
qui se trouve sur la page (un « reset »), ou pour cibler tous les descendants à l'intérieur d'un
conteneur spécifique en combinant * avec un autre sélecteur.
Ce chapitre couvre la syntaxe, deux exemples interactifs, la façon dont * interagit avec la
spécificité, et la mise en garde sur les performances à connaître avant de l'utiliser.
Syntaxe
* {
/* css declarations */
}Utilisé seul, * sélectionne chaque élément. Combiné avec un autre sélecteur et un espace
(un combinateur descendant), il sélectionne chaque élément à l'intérieur
de cette cible :
/* every element inside any <div> */
div * {
/* css declarations */
}Spécificité
Le sélecteur universel a une spécificité de zéro — (0, 0, 0). Il n'ajoute aucun poids à
une règle. Cela signifie que presque n'importe quel autre sélecteur (un nom de balise, une classe,
un id) prendra le dessus sur une déclaration provenant de *, ce qui explique précisément pourquoi
il convient si bien à la définition de valeurs par défaut que des règles plus spécifiques pourront
ensuite affiner.
Exemple : sélectionner chaque élément
La règle ci-dessous applique une couleur de fond à chaque élément de la page, y compris <html>,
<body>, les titres et les paragraphes :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<p id="example2">Lorem ipsum is simply dummy text...</p>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Exemple : sélectionner chaque élément à l'intérieur d'un <div>
Ici, div * cible uniquement les éléments imbriqués à l'intérieur d'un <div>.
Le <p> isolé après le <div> conserve son fond par défaut, tandis que le <p> et le
<span> à l'intérieur du <div> sont mis en forme :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div * {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<span id="example2">Lorem ipsum is simply dummy text...</span>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Un usage courant : le reset de box-sizing
L'utilisation réelle la plus répandue de * est la normalisation du modèle de boîte afin que
le rembourrage et les bordures n'élargissent plus la largeur d'un élément. Cet extrait se
retrouve dans d'innombrables feuilles de style :
*,
*::before,
*::after {
box-sizing: border-box;
}Voir box-sizing pour comprendre ce que border-box modifie.
Performances et bonnes pratiques
- Utilisez-le avec parcimonie dans les sélecteurs imbriqués. Une règle comme
*seule est peu coûteuse, mais le combiner au sein de longues chaînes de descendants (par exemple.nav ul li *) oblige le navigateur à évaluer davantage d'éléments. Pour une seule règle de reset, l'impact est négligeable ; évitez-le dans des sélecteurs profondément imbriqués et fréquemment appariés. - Préférez-le pour les resets, pas pour la mise en thème. Comme sa spécificité est
0,*est idéal pour les valeurs par défaut de base, mais un mauvais choix quand vous avez besoin qu'une règle l'emporte sur d'autres styles. - Il ne correspond aux pseudo-éléments que si vous le demandez.
*correspond aux éléments ;*::beforeet*::aftersont nécessaires pour couvrir également le contenu généré, comme dans le reset ci-dessus.
Sélecteurs associés
- Vue d'ensemble des sélecteurs CSS — la liste complète des types de sélecteurs.
- Sélecteurs d'id et de classe — cibler des éléments spécifiques.
:first-child— une pseudo-classe structurelle.