Combinadores CSS

Los combinadores se refieren a la relación entre los selectores. Un selector CSS puede contener más de un selector. Entre selectores simples, podemos podemos incluir un combinador.

Hay cuatro combinadores diferentes en el CSS:

Tipo Decripción Signo
Selector Descendiente Un “espacio en blanco” entre los selectores.  
Selector Hijo  El signo “mayor que” entre los selectores.
Selector Hermano Adyacente Un signo “más” entre los selectores.
Selector Hermano General Un signo “tilde” entre los selectores ~

Selector Descendiente

El selector descendiente aplica a todas las etiquetas que son descendientes de la etiqueta especificada.

El siguiente ejemplo aplica para todas etiquetas <p> que se encuentren anidadas dentro etiquetas <div>:

div p {
background-color: yellow;
}

Nota: Aplica a etiquetas <p> aunque se encuentren en varios niveles de anidamiento dentro de la etiqueta <div>.

El Selector Hijo

El selector hijo aplica a todas las etiquetas que descienden inmediatamente de la etiqueta especificada.

El siguiente ejemplo aplica a todas las etiquetas <p> que se encuentren anidadas inmediatamente de un elemento <div>:

div > p {
background-color: yellow;
}

Nota: No aplica a etiquetas <p> que se encuentren a más niveles de anidamiento que el inmediato dentro de la etiqueta <div>.

El Selector Hermano Adyacente

El selector hermano aplica aplica a todos los elementos que son adyacentes en el mismo nivel de anidamiento de la etiqueta especificada.

Las etiquetas hermanas deben tener la misma etiqueta padre, y adyacente implica que debe seguir inmediatamente del hermano.

El siguiente ejemplo aplica a todas las etiquetas <p> que se encuentran inmediatamente después de una etiqueta <div>:

div + p {
background-color: yellow;
}

Nota: Inmediatamente después, implica inmediatamente después en el flujo de la página. Esto es: inmediatamente después de la etiqueta de cierre </div> sin considerar las etiquetas <p> que se encuentren anidadas dentro de <div>.

El Selector Hermano General

El selector hermano general aplica a todas las etiquetas que son hermanas en la etiqueta especificada.

El siguiente ejemplo aplica a todas las etiquetas <p> que se encuentran anidadas inmediatamente en una etiqueta <div>:

div ~ p {
background-color: yellow;
}

Nota: No aplica a etiquetas <p> que se encuentran anidadas más niveles que el de la etiqueta <div>