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>
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>
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> |