Sélecteurs universels
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Le sélecteur universel CSS (*) cible les éléments de n'importe quel type.
/* Cibler tous les éléments */
* {
color: green;
}
Le sélecteur universel est un sélecteur de type particulier et peut donc être associé à un espace de noms lors de l'utilisation de @namespace. Cela est utile lorsque vous travaillez avec des documents contenant plusieurs espaces de noms, comme HTML avec SVG ou MathML intégré, ou XML qui mélange plusieurs vocabulaires.
ns|*- cible tous les éléments de l'espace de noms ns*|*- cible tous les éléments|*- cible tous les éléments sans espace de noms déclaré
Note :
Le sélecteur universel (*) cible uniquement les éléments.
Il ne cible pas directement les pseudo-éléments.
Pour cibler tous les pseudo-éléments ::before sur une page, par exemple, vous devez utiliser un sélecteur comme *::before. Cela fonctionne parce que * cible tous les éléments, et le pseudo-élément ::before est disponible sur tous les éléments.
Syntaxe
* {
/* propriétés de style */
}
L'astérisque est optionnelle avec les sélecteurs simples. Par exemple, *.warning et .warning sont équivalents.
Exemples
CSS
* [lang^="fr"] {
color: green;
}
*.warning {
color: red;
}
*#maincontent {
border: 1px solid blue;
}
.floating {
float: left;
}
/* libérer automatiquement le voisin suivant après un élément flottant */
.floating + * {
clear: left;
}
HTML
<p class="warning">
<span lang="fr">Un span vert</span> dans un paragraphe rouge.
</p>
<p id="maincontent" lang="fr">
<span class="warning">Un span rouge</span> dans un paragraphe vert.
</p>
Résultat
Espaces de noms
Dans cet exemple, le sélecteur ne correspondra qu'aux éléments dans l'espace de noms example.
@namespace example url("http://www.exemple.com/");
example|* {
color: blue;
}
Spécifications
| Specification |
|---|
| Selectors Level 4 # the-universal-selector |