¿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

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:

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