¿Qué hace un asterisco (*) en un selector de CSS?

98

Encontré este código CSS y lo ejecuté para ver qué hace y describió CADA elemento en la página,

¿Alguien puede explicar qué hace Asterisk * 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
fuente
@jasondavis: esta pregunta es específica de su código o simplemente haría una nueva pregunta. ¿Su página muestra varios contornos con diferentes colores? La única forma en que puedo producir diferentes colores como ese es si especifico una etiqueta, luego * IE div * { outline ...}y * { outline ... }. Si utilizo * { outline ... }y * * { outline ... }solo se usa la última descripción css.
JabberwockyDecompiler

Respuestas:

95

Es un comodín, esto significa que seleccionará todos los elementos dentro de esa parte del DOM.

Por ejemplo, si quiero aplicar margen a todos los elementos de mi página completa, puede usar:

* {
    margin: 10px;
}

También puede usar esto dentro de las sub-selecciones, por ejemplo, lo siguiente agregaría un margen a todos los elementos dentro de una etiqueta de párrafo:

p * {
    margin: 10px;
}

Su ejemplo está haciendo algunos trucos css para aplicar bordes y márgenes consecutivos a los elementos para darles bordes de múltiples colores. Por ejemplo, un borde blanco rodeado por un borde negro.

Soviut
fuente
¿Cuál es la ventaja de usar p *en lugar de simplemente usar p?
Solomon Closson
7
No hay una "ventaja", es simplemente cómo se seleccionan todos los elementos descendientes dentro de una petiqueta. Así que si había una span, b, strong, img, etc dentro de su párrafo, sería seleccionar aquellos y aplicar los estilos a ellos.
Soviut
30

El CSS al que hizo referencia es muy útil para un diseñador web para depurar problemas de diseño de página. A menudo lo dejo caer en la página temporalmente para poder ver el tamaño de todos los elementos de la página y localizar, por ejemplo, el que tiene demasiado relleno que está empujando otros elementos fuera de lugar.

El mismo truco se puede hacer solo con la primera línea, pero la ventaja de definir múltiples contornos es que obtiene una pista visual a través del color del borde de la jerarquía de los elementos de la página anidados.

Tom
fuente
2
Aunque en estos días los navegadores integrados en los inspectores son mucho más efectivos, ¿no? O usando firebug.
Lawrence Dol
@SoftwareMonkey - Sí, en estos días eso es cierto. Los inspectores incorporados son geniales. Por ejemplo, uso Chrome y Ctrl+Shift+cluego coloco el cursor sobre un elemento y Chrome colorea el fondo. Mucho más rápido que colocar este estilo de asterisco en el CSS.
Tom
1
Aunque la respuesta de Soviut es verdadera, esta respuesta debería haber sido marcada como la respuesta correcta, porque esta es la respuesta exacta a la pregunta formulada.
Billy Samuel
4

* es un comodín. Lo que significa es que aplicará el estilo a cualquier elemento HTML. Los * adicionales aplican el estilo al nivel correspondiente de anidamiento.

Este selector aplicará contornos de diferentes colores a todos los elementos de una página, dependiendo del nivel de anidamiento de los elementos.

futureelite7
fuente
4

* actúa como comodín, al igual que en la mayoría de los demás casos.

Si lo haces:

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

Entonces todos los elementos HTML tendrán esos estilos.

Mike Trpcic
fuente
0

en su hoja de estilo, normalmente necesita definir una regla básica para todos los elementos, como el atributo de tamaño de fuente y los márgenes. {tamaño de fuente: 14px; margen: 0; padding: 0;} / anula la configuración predeterminada del navegador en los elementos, todo el tamaño de fuente del texto se representará como un tamaño de 14 píxeles con margen y relleno cero, incluidos h1, ... pre. * /

Mikel bradley benjamin
fuente