CSS Combinadores


Ejemplo

Visión general

Selector Descripción
div span Selector descendiente (todos los <span> que son descendientes de un <div> )
div > span Selector secundario (todos los <span> que son un hijo directo de un <div> )
a ~ span Selector general de hermanos (todos los <span> que son hermanos después de un <a> )
a + span Selector de hermanos adyacente (todos los <span> que están inmediatamente después de un <a> )

Nota: Los selectores de hermanos se dirigen a los elementos que vienen después de ellos en el documento de origen. CSS, por su naturaleza (se conecta en cascada), no puede apuntar a elementos anteriores o principales . Sin embargo, al usar la propiedad de order flexible, se puede simular un selector de hermanos anterior en medios visuales .

Combinador Descendiente: selector selector

Un combinador descendiente, representado por al menos un carácter de espacio ( ), selecciona elementos que son descendientes del elemento definido. Este combinador selecciona todos los descendientes del elemento (desde elementos secundarios hacia abajo).

div p {
  color:red;
}
<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Demo en vivo en JSBin

En el ejemplo anterior, los primeros dos elementos <p> se seleccionan ya que ambos son descendientes de <div> .


Combinador infantil: selector > selector

El combinador hijo ( > ) se utiliza para seleccionar elementos que son hijos o descendientes directos del elemento especificado.

div > p {
  color:red;
}
<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Demo en vivo en JSBin

El CSS anterior selecciona solo el primer elemento <p> , ya que es el único párrafo que desciende directamente de un <div> .

El segundo elemento <p> no está seleccionado porque no es un elemento secundario directo de <div> .


Combinador de hermanos adyacente: selector + selector

El combinador de hermanos adyacentes ( + ) selecciona un elemento hermano que sigue inmediatamente a un elemento especificado.

p + p {
  color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Demo en vivo en JSBin

El ejemplo anterior selecciona solo aquellos elementos <p> que están precedidos directamente por otro elemento <p> .


Combinador general de hermanos: selector ~ selector

El combinador general de hermanos ( ~ ) selecciona todos los hermanos que siguen el elemento especificado.

p ~ p {
  color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Demo en vivo en JSBin

El ejemplo anterior selecciona todos los elementos <p> que están precedidos por otro elemento <p> , estén o no inmediatamente adyacentes.