Combinadores

El combinador descendiente, que normalmente se representa con un simple carácter de espacio ( ), combina dos selectores de tal manera que los elementos que coinciden con el segundo selector se seleccionan si tienen un elemento ancestro (padre, padre del padre, padre del padre del padre, etc.) que coincida con el primer selector. Los selectores que utilizan un combinador descendiente se denominan selectores descendientes.

body article p {
}

En el siguiente ejemplo, estamos haciendo coincidir solo el elemento <p> que está dentro de un elemento con la clase .box.

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>

.box p {
  color: red;
}

El combinador hijo (>) se coloca entre dos selectores CSS. Coincide solo con aquellos elementos que coinciden con el segundo selector que son hijos directos de los elementos que coinciden con el primero. Los elementos descendientes más abajo en la jerarquía no coinciden. Por ejemplo, para seleccionar solo los elementos <p> que son hijos directos de los elementos <article>:

article > p

En este siguiente ejemplo, tenemos una lista ordenada (<ol>) anidada dentro de una lista desordenada (<ul>). El combinador hijo selecciona solo aquellos elementos <li> que son hijos directos de un <ul> y les aplica un estilo con un borde superior.

Si elimina el > que designa esto como un combinador hijo, termina con un selector descendiente y todos los elementos <li> obtendrán un borde rojo.

<ul>
  <li>Unordered item</li>
  <li>
    Unordered item
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </li>
</ul>

ul > li {
  border-top: 5px solid red;
}

El combinador de hermanos adyacentes (+) se coloca entre dos selectores CSS. Coincide solo con aquellos elementos que coinciden con el segundo selector que vienen justo después del elemento que coincide con el primer selector. Por ejemplo, para seleccionar todos los elementos <img> que están inmediatamente precedidos por un elemento <p>:

p + img

Un caso de uso común es hacer algo con un párrafo que sigue a un encabezado, como en el ejemplo a continuación. En ese ejemplo, estamos buscando cualquier párrafo que comparta un elemento padre con un <h1> e inmediatamente sigue a ese <h1>.

Si inserta algún otro elemento como un <h2> entre el <h1> y el <p>, verá que el párrafo ya no coincide con el selector y, por lo tanto, no se le aplica el color de fondo y el color de primer plano cuando el elemento es adyacente.

<article>
  <h1>Un encabezado</h1>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

body {
  font-family: sans-serif;
}

h1 + p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

Si desea seleccionar hermanos de un elemento, incluso si no son directamente adyacentes, puede usar el combinador de hermanos generales (~). Para seleccionar todos los elementos <img> que vienen en cualquier lugar después de los elementos <p>, haríamos esto:

p ~ img

En el siguiente ejemplo, estamos seleccionando todos los elementos <p> que vienen después del <h1>, e incluso aunque también hay un <div> en el documento, se selecciona el <p> que viene después.

<article>
  <h1>Un encabezado</h1>
  <p>Yo soy un párrafo.</p>
  <div>Yo soy un div</div>
  <p>Yo soy otro párrafo.</p>
</article>

body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

El módulo de anidamiento CSS le permite escribir reglas anidadas que utilizan combinadores para crear selectores complejos.

p {
  ~ img {
  }
}
/* Esto es interpretado por el navegador como */
p ~ img {
}

El selector de anidamiento & también se puede utilizar para crear selectores complejos:

p {
  & img {
  }
}
/* Esto es interpretado por el navegador como */
p img {
}

Aquí hay un ejemplo que demuestra selectores complejos:

<article>
  <h1>Un encabezado</h1>
  <p>Yo soy un párrafo.</p>
  <div>Yo soy un div</div>
  <p>Yo soy otro párrafo.</p>
</article>

body {
  font-family: sans-serif;
}

h1 {
  & ~ p {
    /* esto es interpretado por el navegador como h1 ~ p */
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: 0.5em;
  }
}

Puede combinar cualquiera de los selectores que descubrimos en lecciones anteriores con combinadores para seleccionar parte de su documento. Por ejemplo, para seleccionar elementos de lista con una class de a que son hijos directos de un <ul>, intente lo siguiente:

ul > li[class="a"] {
}

Tenga cuidado, sin embargo, al crear grandes listas de selectores que seleccionan partes muy específicas de su documento. Será difícil reutilizar las reglas CSS ya que ha hecho que el selector sea muy específico para la ubicación de ese elemento en el marcado.

A menudo, es mejor crear una clase simple y aplicarla al elemento en cuestión. Dicho esto, su conocimiento de los combinadores será muy útil si necesita diseñar algo en su documento y no puede acceder al HTML, tal vez debido a que está siendo generado por un CMS.

Has llegado al final de nuestro conjunto de lecciones sobre selectores, pero ¿puedes recordar la información más importante? Puede encontrar más pruebas para verificar que ha retenido esta información antes de continuar: consulte Pon a prueba tus habilidades: Selectores.

Eso es todo por ahora sobre selectores. A continuación, pasaremos a otra parte importante de CSS: el modelo de caja.

• Anterior
• Overview: Bloques de construcción CSS
• Siguiente