Ya dominas los selectores básicos: etiqueta, clase e id. Son tus herramientas del día a día. Pero llega un momento en que necesitas algo más preciso — quieres aplicar un estilo solo cuando se cumplan varias condiciones a la vez, o cuando un elemento está dentro de otro específico.
Aquí es donde los selectores avanzados brillan. Son como afinar el zoom de una cámara hasta ver exactamente lo que quieres.
¿Qué pasa si quieres seleccionar solo los <p> que tengan la clase destacado, pero no otros elementos con esa misma clase? Encadenas el selector de etiqueta con el de clase, sin espacios entre ellos:
Esto aplica únicamente a los <p> con clase destacado. Un <div class="destacado"> quedaría intacto.
También puedes combinar etiqueta con id, o incluso dos clases al mismo tiempo:
Imagina que tienes un <div> y dentro hay varios <p>. ¿Cómo seleccionas solo los párrafos que están dentro de ese <div>, sin afectar a los párrafos que están fuera? Con el selector descendiente — simplemente dejas un espacio entre los selectores:
Esto selecciona todos los <p> que estén dentro de un <div>, sin importar cuántos niveles de profundidad haya entre ellos.
Pero aquí está el secreto: el selector descendiente es muy permisivo. Si quieres ser más estricto y seleccionar solo los elementos que son hijos directos (no nietos, no bisnietos), usas el símbolo >:
Esto afecta a los <li> que están directamente dentro del <ul>, pero no a los <li> que estén dentro de otra lista anidada.
Los elementos que están al mismo nivel dentro del mismo padre se llaman hermanos. CSS tiene dos formas de seleccionarlos:
+)Selecciona el primer elemento que viene justo después de otro:
Solo el primer <p> que esté inmediatamente después de un <h2> recibirá el estilo.
~)Selecciona todos los elementos hermanos que vienen después:
Todos los <p> que sean hermanos de un <h2> y aparezcan después de él recibirán el estilo.
Dale un color de fondo rojo al primer párrafo que esté justo después de un <div>.
Con los selectores correctos, puedes llegar exactamente donde quieres...