Selectores combinadores

¿Qué son?

Un combinador es el símbolo (o espacio) que va entre dos selectores y define cómo se relacionan en el árbol del HTML. Hay cuatro: descendiente (espacio), hijo directo (>), hermano adyacente (+) y hermano general (~).

Descendiente: espacio en blanco

Selecciona un elemento que esté en cualquier nivel dentro de otro, sin importar cuán anidado esté.

.card p {
  color: gray;
}

Esto afecta a todos los <p> dentro de .card, ya sea que estén directamente adentro o anidados varios niveles más profundo.

Hijo directo: >

Selecciona solo a los elementos que son hijos inmediatos, no nietos ni descendientes más lejanos.

.list > li {
  border-bottom: 1px solid #eee;
}

Si dentro de un <li> hay una lista anidada con más <li>, esos no reciben el estilo, porque no son hijos directos de .list sino de la lista anidada.

Hermano adyacente: +

Selecciona un elemento que esté justo después de otro, al mismo nivel (comparten el mismo padre).

h2 + p {
  margin-top: 0;
}

Solo el primer párrafo que viene inmediatamente después de un <h2> pierde el margen superior; el resto de los párrafos siguientes no se ven afectados.

Hermano general: ~

Selecciona a todos los elementos hermanos que vienen después, no solo al primero.

h2 ~ p {
  color: #555;
}

Cualquier <p> que comparta padre con un <h2> y venga después de él en el HTML recibe el estilo, aunque no sea el inmediatamente siguiente.