Los selectores CSS avanzados permiten una orientación quirúrgica de los elementos basada en su posición exacta en el árbol DOM (Document Object Model) y en la lógica de sus atributos de datos, evitando la sobrecarga innecesaria de clases en el HTML.
1The Logic of Connection (Combinators)
Los combinadores definen la relación estructural entre dos selectores dentro del DOM.
- →Descendiente (Espacio): Afecta a todos los nodos anidados en cualquier nivel de profundidad.
- →Hijo Directo (`>`): Una regla estricta que solo afecta a los nodos que están un nivel exactamente por debajo del padre. *Error común: Usar
>cuando hay un div intermedio o un span oculto romperá la regla.* - →Hermano Adyacente (`+`): Afecta estrictamente al elemento que sigue inmediatamente después. Excelente rendimiento para ajustar márgenes verticales.
- →Hermano General (`~`): Afecta a todos los hermanos que le siguen en el flujo del documento, sin importar cuántos elementos haya entre ellos.
2Attribute Data Traversal
Los selectores de atributos ([]) permiten estilizar nodos basándose en sus atributos HTML sin necesidad de inyectar clases nuevas.
- →Coincidencia Exacta (`[attr='val']`): Óptimo para diferenciar tipos de input (ej.
input[type='password']). - →**Coincidencia Parcial (
^=, $=, *=)**: Permiten expresiones regulares ligeras nativas de CSS.^=para inicio (URLs),$=para final (extensiones de archivo) y*=para subcadenas. - →Rendimiento: Aunque son potentes, los selectores de atributos parciales muy complejos tienen un costo computacional ligeramente superior al de una clase directa en motores de renderizado antiguos.
