¿Cómo mejora HTML moderno la selección de elementos con CSS?

HTML no introduce nuevas sintaxis de selectores CSS, ya que la definición de los selectores es responsabilidad de CSS. Sin embargo, HTML moderno sí ha mejorado la forma en que podemos seleccionar elementos al proporcionar estructuras y atributos más ricos y semánticos que sirven como mejores «enganches» (hooks) para los selectores CSS existentes y los nuevos que van surgiendo en las especificaciones de CSS.

1. Elementos semánticos como selectores más claros:
   HTML5 introdujo muchos elementos semánticos como <article>, <section>, <nav>, <aside>, <header>, <footer>, <main>, <figure>, <figcaption>, etc.
   Estos te permiten usar selectores de tipo más significativos en CSS, haciendo tu código más legible y mantenible que si solo usaras <div> con múltiples clases.
   Por ejemplo, en lugar de div.header, div.main-content, div.sidebar, ahora puedes usar selectores directos como header, main, aside.
   /* Antes, con divs genéricos */
.encabezado-principal { /* ... */ }
.contenido-principal { /* ... */ }
/* Con HTML semántico moderno */
header { /* ... */ }
main { /* ... */ }
2. Nuevos atributos y tipos de input como ganchos:
   • Los nuevos tipos de input en HTML5 (como type="email", type="date", type="number", type="search", etc.) pueden ser seleccionados específicamente usando selectores de atributo:
     input[type="date"] { border-color: skyblue; }
   • Los atributos de validación de formularios (required, pattern, min, max) interactúan directamente con pseudo-clases de CSS como :required, :optional, :valid, :invalid, :in-range, :out-of-range, permitiéndote dar estilos basados en el estado de validación del campo:
     input:invalid { border-left: 5px solid red; }
input:valid { border-left: 5px solid green; }
3. Atributos ARIA para accesibilidad y selección:
   Los atributos ARIA (Accessible Rich Internet Applications), como role, aria-label, aria-describedby, aria-hidden, aria-invalid, etc., aunque su propósito principal es la accesibilidad, también pueden usarse como selectores de atributo en CSS.
   Esto puede ser útil para aplicar estilos basados en estados de accesibilidad o para componentes personalizados.
   [role="alert"] {
background-color: lightyellow;
border: 1px solid orange;
}
[aria-hidden="true"] {
display: none !important; /* Ojo con !important, usar con cautela */
}
4. Mejor aprovechamiento de nuevos selectores CSS:
   La estructura más rica de HTML moderno funciona muy bien con selectores CSS más avanzados que han ganado soporte, como:
   • :is() y :where(): Permiten agrupar selectores de forma más concisa.
   • :has() (el «selector padre»): Permite seleccionar un elemento basado en sus descendientes.
     Por ejemplo, puedes seleccionar un <figure> que contiene una <figcaption>: figure:has(figcaption) { margin-bottom: 2em; }.
     Su compatibilidad es muy buena en navegadores modernos desde finales de 2023.
   • Pseudo-clases como :empty, :target, :not(), entre otras, pueden combinarse de formas más expresivas con una estructura HTML semántica.
5. Web Components y Shadow DOM:
   Aunque esto es más sobre encapsulación, el Shadow DOM (parte de los Web Components) introduce el concepto de estilos «aislados» o «encapsulados».
   Dentro de un Shadow DOM, CSS tiene pseudo-clases como :host y :host-context() para estilizar el elemento anfitrión del shadow tree desde dentro.
   Esto no es una nueva forma de seleccionar elementos fuera del componente, sino una nueva forma de gestionar los estilos dentro de un componente, lo cual es una mejora moderna significativa.

En resumen, HTML moderno no crea nueva sintaxis de selectores CSS, pero sí enriquece el «vocabulario» de elementos y atributos disponibles, lo que a su vez permite que los selectores CSS (tanto los clásicos como los más nuevos) se utilicen de manera más potente, semántica y mantenible.