CSS
Uso de selectores de tipo, clase, ID, universales y combinadores para expresar relaciones entre elementos sin acoplar los estilos al HTML.
Un selector describe qué elementos deben recibir una regla.
.project-card { ... }* {
box-sizing: border-box;
}Coincide con cualquier elemento. Los pseudo-elementos no quedan incluidos automáticamente en este patrón.
*,
*::before,
*::after {
box-sizing: border-box;
}button { font: inherit; }Coincide por nombre de elemento. Útil en base styles; puede ser demasiado amplio en componentes complejos.
.card { ... }Es el selector principal para estilos reutilizables.
<article class="card featured"></article>.card.featured { ... }Sin espacio exige ambas clases en el mismo elemento.
#checkout { ... }Es válido, pero añade alta especificidad. Usa IDs principalmente para relaciones, fragmentos o scripts; para styling frecuente, las clases suelen escalar mejor.
.card h2 { ... }Coincide con cualquier h2 dentro de .card, sin importar profundidad.
Puede afectar contenido anidado inesperado.
.card > h2 { ... }Solo coincide con hijos inmediatos. Comunica un contrato estructural más preciso.
h2 + p {
margin-block-start: 0.5rem;
}Selecciona el primer p inmediatamente posterior.
h2 ~ p { ... }Selecciona todos los hermanos p posteriores con el mismo padre.
button.primary:hoverEs compuesto: varias condiciones sobre el mismo elemento.
.toolbar > button.primary:hoverEs complejo: combina selectores mediante relaciones.
Menos estable:
.page main section div.card h2 span { ... }Más claro:
.card__title { ... }o:
@scope (.card) {
:scope > h2 { ... }
}h1,
h2,
h3 {
text-wrap: balance;
}Cada selector se evalúa de forma independiente, pero comparte declaraciones.
En HTML, los nombres de elementos suelen tratarse sin distinguir mayúsculas ASCII. Clases, IDs y valores dependen del contexto y deben tratarse como contratos exactos.
Los motores modernos optimizan selección; escribir selectores claros importa más que microoptimizar cada combinador. El verdadero costo suele estar en DOM enorme, invalidaciones frecuentes o reglas demasiado amplias durante cambios dinámicos.
.a.b con .a .b.> limita a hijos directos.+ y ~ trabajan con hermanos.¿Qué diferencia hay entre .card.title y .card .title?
La primera exige ambas clases en el mismo elemento; la segunda selecciona un descendiente con clase title dentro de card.
Atributos y listas de selectores amplía cómo seleccionar por estado declarativo.