Que fait un astérisque (*) dans un sélecteur CSS?

98

J'ai trouvé ce code CSS et je l'ai exécuté pour voir ce qu'il fait et il décrivait CHAQUE élément de la page,

Quelqu'un peut-il expliquer ce que fait l'astérisque * en CSS?

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>
css css-selectors JasonDavis
la source
@jasondavis - Cette question est spécifique à votre code ou je poserais simplement une nouvelle question. Votre page affiche-t-elle plusieurs contours avec des couleurs différentes? La seule façon dont je peux produire différentes couleurs comme ça est si je spécifie une balise puis * IE div * { outline ...}et * { outline ... }. Si j'utilise * { outline ... }et * * { outline ... }que seule la dernière description css est utilisée.
JabberwockyDecompiler

Réponses:

95

C'est un joker, cela signifie qu'il sélectionnera tous les éléments dans cette partie du DOM.

Par exemple, si je veux appliquer une marge à chaque élément de ma page entière, vous pouvez utiliser:

* {
    margin: 10px;
}

Vous pouvez également l'utiliser dans les sous-sélections, par exemple, ce qui suit ajouterait une marge à tous les éléments d'une balise de paragraphe:

p * {
    margin: 10px;
}

Votre exemple consiste à faire une supercherie css pour appliquer des bordures et des marges consécutives aux éléments pour leur donner plusieurs bordures colorées. Par exemple, une bordure blanche entourée d'une bordure noire.

Soviut
la source
Quel est l'avantage d'utiliser p *par opposition à simplement utiliser p?
Solomon Closson
7
Il n'y a pas d '"avantage", c'est simplement la façon dont vous sélectionnez tous les éléments descendants à l'intérieur d'une pbalise. Donc , si vous aviez un span, b, strong, img, etc. dans votre paragraphe, il choisirait ceux -ci et appliquer les styles à eux.
Soviut
30

Le CSS que vous avez référencé est très utile à un concepteur Web pour le débogage des problèmes de mise en page. Je le laisse souvent tomber temporairement dans la page afin de pouvoir voir la taille de tous les éléments de la page et suivre, par exemple, celui qui a trop de rembourrage qui pousse les autres éléments hors de leur place.

La même astuce peut être effectuée avec seulement la première ligne, mais l'avantage de définir plusieurs contours est que vous obtenez un indice visuel via la couleur de la bordure de la hiérarchie des éléments de page imbriqués.

À M
la source
2
Bien que ces jours-ci, le navigateur intégré aux inspecteurs soit beaucoup plus efficace, non? Ou en utilisant Firebug.
Lawrence Dol
@SoftwareMonkey - Oui, de nos jours, c'est vrai. Les inspecteurs intégrés sont excellents. Par exemple, j'utilise Chrome et je passe Ctrl+Shift+censuite la souris sur un élément et Chrome colore l'arrière-plan. Beaucoup plus rapide que de déposer ce style astérisque dans le CSS.
Tom
1
Bien que la réponse de Soviut soit vraie, cette réponse aurait dû être marquée comme la bonne réponse, car c'est la réponse exacte à la question posée.
Billy Samuel
4

* est un joker. Cela signifie qu'il appliquera le style à n'importe quel élément HTML. Des * supplémentaires appliquent le style à un niveau d'imbrication correspondant.

Ce sélecteur appliquera des contours colorés différents à tous les éléments d'une page, en fonction du niveau d'imbrication des éléments.

futureelite7
la source
4

* agit comme un joker, comme dans la plupart des autres instances.

Si tu fais:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Ensuite, tous les éléments HTML auront ces styles.

Mike Trpcic
la source
0

dans votre feuille de style, vous devez généralement définir une règle de base pour tous les éléments tels que l'attribut font-size et les marges. {taille de la police: 14px; marge: 0; padding: 0;} / remplace les paramètres par défaut du navigateur sur les éléments, toute la taille de la police du texte sera rendue en taille de 14 pixels avec une marge et un remplissage zéro, y compris h1, ... pre. * /

Mikel Bradley Benjamin
la source