Combinadores CSS

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>