Que fait le sélecteur * * CSS?

97

Récemment , je suis tombé sur * *en CSS .

Référence du site - Lien du site .

Pour une seule *utilisation dans la feuille de style CSS, Internet et Stack Overflow regorgent d'exemples, mais je ne suis pas sûr d'utiliser deux * *symboles dans CSS.

Je l'ai recherché sur Google *, mais je n'ai pas pu trouver d'informations pertinentes à ce sujet, car un seul sélectionne tous les éléments, mais je ne sais pas pourquoi le site l'a utilisé deux fois. Quelle est la partie manquante pour cela, et pourquoi ce hack est-il utilisé (s'il s'agit d'un hack)?

html css css-selectors swapnesh
la source

Réponses:

138

Comme à chaque fois que vous mettez deux sélecteurs l'un après l'autre (par exemple li a), vous obtenez le combinateur descendant. Il en * *va de même pour tout élément descendant de tout autre élément - en d'autres termes, tout élément qui n'est pas l'élément racine de tout le document.

Hobbs
la source
thx pour les reply..this est ce que je pensais pour , mais pas sûr si pensé à demander de l'accepter community..will bientôt 1
swapnesh
1
juste une dernière chose à demander - est-il vraiment pertinent d'utiliser * *? comme si je saisis le concept sans le comprendre en termes pratiques :(
swapnesh
2
@swapnesh cela ressemble à un piratage de navigateur. Il y a une * { font-size: XXX }règle et une * * { font-size: YYY }règle. L'un d'eux s'applique à la plupart des navigateurs, et l'autre s'applique aux navigateurs avec un certain bogue, même si je n'ai pas la patience de comprendre les détails. C'est similaire au * htmlpiratage qui était couramment utilisé pour détecter l'ancien IE.
hobbs
merci pour l'ajout du dernier bloc détaillé sous les commentaires ... c'est presque parfait ... pas besoin de faire plus de brain storming pour ça :) merci beaucoup :)
swapnesh
10
Notez que la manière de * html, * * va correspondre à l'élément HTML dans IE6.
Alohci
80

Juste un petit grand exemple:

Essayez d'ajouter ceci sur votre site:

* { 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; }

Démo: http://jsfiddle.net/l2aelba/sFSad/

Exemple 2:

Que fait le sélecteur * * CSS?

Démo: http://jsfiddle.net/l2aelba/sFSad/34/

l2aelba
la source
7
Ce n'est pas strictement la réponse, mais quelle belle visualisation!
aboy021
1
@ l2aelba vraiment une belle explication :) +1
swapnesh
33

* *Accorde à tout sauf l'élément de niveau supérieur, par exemple html.

Frambot
la source
Merci Joe, testé ici et aussi selon les commentaires ci-dessus: le * *sélecteur est équivalent à html *pour tous les navigateurs sauf le bon vieux IE6 :-)
Stano
@Stano * *équivaut à html *... pour un fichier HTML. Mais CSS peut être utilisé pour styliser d'autres types de documents (SVG notamment).
Sylvain Leroux
11

* signifie appliquer des styles donnés à tous les éléments.

* *signifie appliquer des styles donnés à tous les éléments enfants de l'élément. Exemple:

body > * {
  margin: 0;
}

Cela applique des styles de marge à tous les éléments enfants de body. De la même façon,

* * {
  margin: 0;
}

s'applique margin: 0aux *éléments enfants de. En bref, cela s'applique margin: 0à presque tous les éléments.

En général, un seul *suffit. Il n'y en a pas besoin de deux * *.

CrazyFellow
la source
2
merci pour l'explication +1 .. même si je ne suis pas sûr de ce que vous venez de mentionner dans la dernière ligne "Généralement, * est suffisant. Il n'y a pas besoin de * *. Je suppose."
échange du
3
* *applique des styles aux éléments descendants , pas aux éléments enfants. Les éléments enfants seraient >comme dans votre exemple, pas l'espace. Le descendant et l'enfant ne sont pas la même chose.
BoltClock
7

Cela sélectionne tous les éléments imbriqués dans un autre élément de la même manière div aque tous les <a>éléments imbriqués quelque part dans un <div>élément.

Mike Brant
la source