Guía completa de selectores CSS
Los selectores son la columna vertebral de cualquier hoja de estilo. En este artículo descubrirás su concepto, los tipos más usados, ejemplos prácticos y mejores prácticas para escribir CSS limpio, mantenible y rápido.
1. ¿Qué es un selector CSS?
Un selector es la parte de la regla CSS que indica qué elemento(s) del DOM serán afectados por las declaraciones que aparecen entre llaves. La sintaxis básica es:
selector { propiedad: valor; }El selector puede apuntar a una etiqueta (p), una clase (.card), un id (#header) o a combinaciones más complejas.
2. Tipos de selectores
A continuación se listan los grupos principales, con una breve descripción y un mini‑ejemplo.
- Selector de tipo (etiqueta):
h1 { … } - Selector de clase:
.btn-primary { … } - Selector de ID:
#main-nav { … } - Selector universal:
* { box-sizing: border-box; } - Selector de atributo:
input[type="email"] { … } - Pseudo‑clases:
a:hover { … },li:first-child { … } - Pseudo‑elementos:
p::first-line { … },div::after { … } - Combinadores:
ul > li { … }(hijo directo),section + article { … }(hermano adyacente),nav ~ footer { … }(hermano general). - Selectores de nivel 4:
:is(),:where(),:has()(selector de padres) y:not()avanzado.
3. Ejemplos prácticos
Los siguientes fragmentos demuestran cómo combinar selectores para lograr interfaces reales.
3.1. Tarjeta de producto
/* Contenedor de la tarjeta */
.card {
border: 1px solid #e0e0e0;
border-radius: .5rem;
overflow: hidden;
transition: transform .2s ease-in-out;
}
/* Imagen dentro de la tarjeta */
.card > img {
width: 100%;
display: block;
}
/* Hover con pseudo‑clase */
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
/* Botón dentro de la tarjeta usando clase compuesta */
.card .btn-primary {
background-color: #0069d9;
border: none;
}
3.2. Menú de navegación con :has() (CSS 4)
/* Resaltar ítems que tengan sub‑menú activo */
nav li:has(> ul li.active) > a {
color: #ff5722;
font-weight: 600;
}
Este selector permite aplicar estilos al li padre cuando alguno de sus descendientes está activo, eliminando la necesidad de JavaScript extra.
4. Comparativa de especificidad
La especificidad determina cuál regla gana cuando varios selectores se aplican al mismo elemento. La tabla siguiente muestra, en dos columnas, la representación numérica y un ejemplo práctico para cada tipo de selector.
Representación (a,b,c,d)
| Tipo | Valor |
|---|---|
| Selector universal (*) | 0,0,0,0 |
| Elemento (p, h1) | 0,0,0,1 |
| Clase, atributo, pseudo‑clase | 0,0,1,0 |
| ID (#header) | 0,1,0,0 |
| Estilos en línea | 1,0,0,0 |
:where() (no cuenta) | 0,0,0,0 |
Ejemplo práctico
/* 0,0,0,1 */
article { color: #333; }
/* 0,0,1,0 */
.article.highlight { background: #ff0; }
/* 0,1,0,0 */
#main { padding: 2rem; }
/* 1,0,0,0 */
Inline style
Si dos reglas compiten, la que tenga mayor valor en la primera posición distinta (a → b → c → d) prevalece.
5. Buenas prácticas y rendimiento
- Evita selectores demasiado genéricos (
*,div) en proyectos grandes; aumentan el tiempo de cálculo del renderizado. - Prefiere clases sobre IDs para componentes reutilizables; la especificidad de los IDs dificulta la sobrescritura.
- Utiliza
:where()cuando necesites aplicar estilos con baja especificidad, evitando colisiones. - Limita la profundidad de los selectores (no más de 3 niveles) para mantener el CSS fácil de mantener y rápido de procesar.
- Combina
display:flexogriden lugar de depender de selectores de hijos para alineación. - Minimiza los pseudo‑elementos anidados; algunos navegadores antiguos pueden renderizarlos más lento.
- Ordena tu hoja de estilo por categoría (reset → base → layout → components → utilities) y usa herramientas como
stylelintpara validar.
Para auditorías de rendimiento, Web.dev CSS Performance recomienda revisar el critical CSS y cargar el resto de forma asíncrona.
6. Depuración y herramientas
Los navegadores modernos incluyen potentes paneles de DevTools:
- Inspector de elementos: muestra la cascada de estilos y la especificidad calculada.
- Panel "Computed": útil para verificar valores finales.
- Herramienta "Coverage" (Chrome): identifica CSS no usado.
Otras herramientas recomendadas:
7. Impacto SEO y accesibilidad
Un CSS bien estructurado favorece el Core Web Vitals (LCP, CLS, FID). Algunas recomendaciones:
- Coloca el
<link rel="preload" href="styles.css" as="style">en el<head>para reducir el First Contentful Paint. - Evita
display:noneen contenido importante; los motores de búsqueda pueden considerarlo contenido oculto. - Usa unidades relativas (
rem,em) para accesibilidad y ajustes de tamaño de fuente.
Los selectores :focus-visible y :aria‑selected mejoran la navegación por teclado y los lectores de pantalla.
Guía completa de selectores CSS: conceptos, ejemplos y buenas prácticas