CSS Selectores combinados
Selectores combinados de CSS
 |
Los selectores combinados describen la relación entre dos selectores. |
|---|
Los selectores combinados de CSS incluyen varias formas de combinar selectores simples.
En CSS3 se incluyen cuatro tipos de combinación:
- Selector de descendientes (con un espacio de separación)
- Selector de elementos hijos (con el signo mayor que>como separador)
- Selector de hermanos adyacentes (con el signo más+como separador)
- Selector de hermanos generales (con la virgulilla～como separador)
Selector de descendientes
El selector de descendientes se utiliza para seleccionar los elementos descendientes de un elemento.
El siguiente ejemplo selecciona todos los elementos <p> que están dentro de un elemento <div>:
Selector de elementos hijos
En comparación con el selector de descendientes, el selector de elementos hijos (Child selectors) solo puede seleccionar elementos que son hijos directos/primer nivel de un elemento.
El siguiente ejemplo selecciona todos los elementos <p> que son hijos directos de un elemento <div>:
Selector de hermanos adyacentes
El selector de hermanos adyacentes (Adjacent sibling selector) puede seleccionar el elemento que está inmediatamente después de otro elemento, y ambos tienen el mismo elemento padre.
Si necesita seleccionar el elemento inmediatamente después de otro elemento, y ambos tienen el mismo padre, puede usar el selector de hermanos adyacentes (Adjacent sibling selector).
El siguiente ejemplo selecciona el primer elemento <p> que está inmediatamente después de un elemento <div>:
Selector de hermanos posteriores
El selector de hermanos posteriores selecciona todos los elementos hermanos que siguen al elemento especificado.
El siguiente ejemplo selecciona todos los elementos <p> que son hermanos posteriores de un elemento <div>:
Otras extensiones