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>.