Selector CSS *
El selector CSS * selecciona todos los elementos. También puede seleccionar todos los elementos dentro de otro elemento. Lee sobre el selector y prueba ejemplos.
El selector * (asterisco) es el selector universal. Coincide con todos los elementos del
documento, independientemente de su tipo, id o clase.
Normalmente se usa * en dos situaciones: para aplicar un estilo base a todo en la
página (un "reset"), o para apuntar a todos los descendientes dentro de un contenedor
específico combinando * con otro selector.
Este capítulo cubre la sintaxis, dos ejemplos ejecutables, cómo * interactúa con la especificidad
y la advertencia de rendimiento que debes conocer antes de usarlo.
Sintaxis
* {
/* css declarations */
}Usado por sí solo, * selecciona todos los elementos. Combinado con otro selector y un espacio
(un combinador descendiente), selecciona todos los elementos dentro
de ese objetivo:
/* every element inside any <div> */
div * {
/* css declarations */
}Especificidad
El selector universal tiene una especificidad de cero — (0, 0, 0). No añade ningún
peso a una regla. Eso significa que casi cualquier otro selector (un nombre de etiqueta, una clase, un id) anulará
una declaración proveniente de *, que es exactamente por qué funciona bien para establecer
valores predeterminados que luego pueden refinarse con reglas más específicas.
Ejemplo: seleccionar todos los elementos
La regla de abajo pinta el fondo de todos los elementos de la página, incluyendo <html>,
<body>, encabezados y párrafos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<p id="example2">Lorem ipsum is simply dummy text...</p>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Ejemplo: seleccionar todos los elementos dentro de un <div>
Aquí div * apunta solo a los elementos anidados dentro de un <div>.
El <p> independiente después del <div> mantiene su fondo predeterminado, mientras que el <p> y
el <span> dentro del <div> reciben estilos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div * {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<span id="example2">Lorem ipsum is simply dummy text...</span>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Un uso común: un reset de box-sizing
El uso más popular en el mundo real de * es normalizar el modelo de caja para que el padding y
los bordes ya no amplíen el ancho de un elemento. Este fragmento está en innumerables hojas de estilo:
*,
*::before,
*::after {
box-sizing: border-box;
}Consulta box-sizing para ver qué cambia border-box.
Rendimiento y buenas prácticas
- Úsalo con moderación en selectores anidados. Una regla como
*sola es económica, pero combinándola dentro de cadenas de descendientes largas (por ejemplo.nav ul li *) obliga al navegador a evaluar más elementos. Para una sola regla de reset esto es insignificante; evítalo en selectores profundamente anidados que se evalúan con frecuencia. - Prefiere usarlo para resets, no para temas visuales. Dado que su especificidad es
0,*es ideal para valores predeterminados de base, pero una mala elección cuando necesitas que una regla gane frente a otros estilos. - Coincide con pseudo-elementos solo cuando lo solicitas.
*coincide con elementos;*::beforey*::afterson necesarios para cubrir también el contenido generado, como en el reset anterior.
Selectores relacionados
- Descripción general de los selectores CSS — la lista completa de tipos de selectores.
- Selectores de id y clase — apunta a elementos específicos.
:first-child— una pseudo-clase estructural.