¿Qué hace el selector * * CSS?

97

Recientemente me encontré * *en el CSS .

Referencia del sitio: enlace del sitio .

Para un solo *uso en la hoja de estilo CSS, Internet y Stack Overflow están inundados de ejemplos, pero no estoy seguro de usar dos * *símbolos en CSS.

Lo busqué en Google, pero no pude encontrar ninguna información relevante sobre esto, ya que una sola *selecciona todos los elementos, pero no estoy seguro de por qué el sitio lo usó dos veces. ¿Cuál es la parte que falta para esto y por qué se usa este truco (si es un truco)?

html css css-selectors intercambiar
fuente

Respuestas:

138

Al igual que en cualquier otro momento, pones dos selectores uno tras otro (por ejemplo li a), obtienes el combinador descendiente. También lo * *es cualquier elemento que sea descendiente de cualquier otro elemento; en otras palabras, cualquier elemento que no sea el elemento raíz de todo el documento.

hobbs
fuente
gracias por la respuesta ... esto es lo que estaba pensando, pero no estoy seguro, así que pensé en preguntarle a la comunidad ... lo aceptaré pronto +1
swapnesh
1
solo una cosa más para preguntar: ¿es realmente relevante usar * *? como si capto el concepto pero no lo
entiendo
2
@swapnesh parece un truco del navegador. Hay una * { font-size: XXX }regla y una * * { font-size: YYY }regla. Uno de ellos se aplica a la mayoría de los navegadores y el otro se aplica a los navegadores con cierto error, aunque no tengo paciencia para averiguar los detalles. Es similar al * htmltruco que solía ser de uso común para detectar IE antiguos.
hobbs
gracias por agregar el último bloque detallado en los comentarios ... es casi perfecto ... no es necesario hacer más lluvia de ideas para eso :) gracias mucho :)
swapnesh
10
Tenga en cuenta que en la forma de * html, * * va a coincidir con el elemento html en IE6.
Alohci
80

Solo un pequeño gran ejemplo:

Intente agregar esto en su sitio:

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

Demostración: http://jsfiddle.net/l2aelba/sFSad/

Ejemplo 2:

¿Qué hace el selector * * CSS?

Demostración: http://jsfiddle.net/l2aelba/sFSad/34/

l2aelba
fuente
7
Esta no es estrictamente la respuesta, ¡pero qué hermosa visualización!
aboy021
1
@ l2aelba realmente una buena explicación :) +1
swapnesh
33

* *Coincide con todo, excepto el elemento de nivel superior, por ejemplo, html.

Frambot
fuente
Gracias Joe, lo probé aquí y también de acuerdo con los comentarios anteriores: el * *selector es equivalente a html *para todos los navegadores excepto el antiguo IE6 bueno :-)
Stano
@Stano * *es equivalente a html *... para un archivo HTML. Pero CSS puede usarse para diseñar otro tipo de documentos (especialmente SVG).
Sylvain Leroux
11

* significa aplicar estilos dados a todos los elementos.

* *significa aplicar estilos dados a todos los elementos secundarios del elemento. Ejemplo:

body > * {
  margin: 0;
}

Esto aplica estilos de margen a todos los elementos secundarios del cuerpo. Mismo camino,

* * {
  margin: 0;
}

se aplica margin: 0a *los elementos secundarios de. En resumen, se aplica margin: 0a casi todos los elementos.

Generalmente, uno *es suficiente. No se necesitan dos * *.

CrazyFellow
fuente
2
gracias por la explicación +1 ... aunque ni siquiera yo estoy seguro de lo que acaba de mencionar en la última línea "Generalmente, * es suficiente. No hay necesidad de * *. Supongo".
swapnesh
3
* *aplica estilos a elementos descendientes , no a elementos secundarios. Los elementos secundarios serían >como en su ejemplo, no el espacio. Descendiente e hijo no son lo mismo.
BoltClock
7

Eso selecciona todos los elementos anidados dentro de otro elemento de la misma manera div aque seleccionaría todos los <a>elementos anidados en algún lugar dentro de un <div>elemento.

Mike Brant
fuente