¿Qué hace un asterisco (*) en un selector de CSS?
Encontré este código CSS y lo ejecuté para ver qué hace y describió CADA elemento de la página.
¿ Alguien puede explicar qué hace el asterisco *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>
Es un comodín, esto significa que seleccionará todos los elementos dentro de esa parte del DOM.
Por ejemplo, si quiero aplicar margen a cada elemento de toda mi página, puedo usar:
* {
margin: 10px;
}
También puede usar esto dentro de subselecciones; por ejemplo, lo siguiente agregaría un margen a todos los elementos dentro de una etiqueta de párrafo:
p * {
margin: 10px;
}
Su ejemplo consiste en hacer algunos trucos de CSS para aplicar bordes y márgenes consecutivos a elementos para darles bordes de múltiples colores. Por ejemplo, un borde blanco rodeado por un borde negro.
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 coloco temporalmente en la página para poder ver el tamaño de todos los elementos de la página y localizar, por ejemplo, el que tiene demasiado relleno, lo que desplaza a otros elementos fuera de lugar.
Se puede hacer el mismo truco solo con la primera línea, pero la ventaja de definir varios contornos es que se obtiene una pista visual a través del color del borde sobre la jerarquía de los elementos de la página anidados.
