Un combinador es algo que explica la relación entre los selectores. Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.

Exiten 4 diferentes combinadores en CSS:

  • Selector de descendientes (espacio)
  • Selector hijo (>)
  • Selector de hermano adyacente (+)
  • Selector general de hermanos (~)

Selector de descendientes

El selector de descendientes coincide con todos los elementos que son descendientes de un elemento especificado. El siguiente ejemplo selecciona todos los elementos <p> dentro de los elementos <div>:

div p {
  background-color: yellow;
}

Selector hijo

El selector hijo selecciona todos los elementos que son los hijos de un elemento específico. El siguiente ejemplo selecciona todos los elementos <p> que son hijos de un elemento <div>.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>

<p>El selector hijo (>) selecciona todos los elementos
que son hijos de un elemento específico.</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- NO HIJO PERO SÍ DESCENDIENTE -->
<p>Paragraph 3 in the div (dentro de un elemento section).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>

Elemento hermano (+)

El selector de hermanos adyacente se usa para seleccionar un elemento que está directamente después de otro elemento específico. Los elementos hermanos deben tener el mismo elemento principal, y «adyacente» significa «inmediatamente después». El siguiente ejemplo selecciona el primer elemento <p> que se coloca inmediatamente después de los elementos <div>.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>El selector + se utiliza para seleccionar un elemento que está directamente
después de otro elemento específico.</p>
<p>El siguiente ejemplo selecciona el primer elemento p que se coloca
inmediatamente después de los elementos div:</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>

El resultado sería el siguiente:

Selector general de hermanos (~)

El selector de hermanos general selecciona todos los elementos que son hermanos siguientes de un elemento específico. El siguiente ejemplo selecciona todos los elementos <p> que son los siguientes hermanos de los elementos <div>.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>El selector general de hermanos (~) selecciona todos los elementos
que son los hermanos siguientes de un elemento especificado.</p>

<p>Paragraph 1.</p>

<div>
<p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>

El resultado sería el siguiente:

Resumen

Selector Ejemplo Descripción del ejemplo
element element div p Selecciona todos los elementos <p> dentro de los elementos <div>
element > element div > p Selecciona todos los elementos <p> donde el padre es un elemento <div>
element + element div + p Selecciona el primer elemento <p> que se coloca inmediatamente después de los elementos <div>
element1 ~ element2 p ~ ul Selecciona todos los elementos <ul> que están precedidos por un elemento <p>