Combinador CSS

Combinador CSS

El combinador es un mecanismo que explica la relación entre los selectores.

Los selectores CSS pueden contener múltiples selectores simples. Entre los selectores simples, podemos incluir un combinador.

En CSS hay cuatro tipos diferentes de combinadores:

  • Selector de descendiente (espacio)
  • Selector de hijo (>)
  • Selector de hermano adyacente (+)
  • Selector de hermano genérico (~)

Selector de descendiente

El selector de descendiente coincide con todos los elementos que son descendientes de un elemento especificado.

El siguiente ejemplo selecciona todos los elementos <p> dentro del elemento <div>.

Ejemplo

div p {
  background-color: yellow;
}

Pruebe usted mismo

Selector de hijo

El selector de hijo coincide con todos los elementos que son elementos hijo de un elemento especificado.

El siguiente ejemplo selecciona todos los elementos <p> que son elementos hijo de <div>.

Ejemplo

div > p {
  background-color: yellow;
}

Pruebe usted mismo

Selector de hermano adyacente

El selector de hermano adyacente coincide con todos los elementos que son elementos同级 adyacentes a un elemento especificado.

Los elementos hermano (elementos同级) deben tener el mismo elemento padre. 'Adyacente' significa 'siguiente'.

El siguiente ejemplo selecciona todos los elementos <p> que siguen inmediatamente después del elemento <div>.

Ejemplo

div + p {
  background-color: yellow;
}

Pruebe usted mismo

Selector de hermano genérico

El selector de hermano genérico coincide con todos los elementos que son elementos同级 de un elemento especificado.

El siguiente ejemplo selecciona todos los elementos <p> que son elementos同级 de <div>.

Ejemplo

div ~ p {
  background-color: yellow;
}

Pruebe usted mismo

Todos los selectores de combinación CSS

Selector Ejemplo Descripción de ejemplo
elemento elemento div p Seleccione todos los elementos <p> dentro del elemento <div>.
elemento>elemento div > p Seleccione todos los elementos <p> cuyos elementos padre son elementos <div>.
elemento+elemento div + p Seleccione todos los elementos <p> que sigan inmediatamente después de un elemento <div>.
elemento1~elemento2 p ~ ul Seleccione cada elemento <ul> que tenga un elemento <p> anterior.

Lectura adicional

Libro de texto adicional:Selector de descendiente CSS

Libro de texto adicional:Selector de elemento hijo CSS

Libro de texto adicional:Selector de hermano adyacente CSS