Un combinador es algo que explica la relación entre los selectores.
Un selector CSS puede contener más de un selector simple. entre lo simple selectores, podemos incluir un combinador.
Hay cuatro combinadores diferentes en CSS:
selector descendiente (espacio)
selector de niños (>)
selector de hermanos adyacentes (+)
selector de hermanos general (~)
El selector de descendientes coincide con todos los elementos que son descendientes de un determinado elemento.
El siguiente ejemplo selecciona todos los elementos <p> dentro de los elementos <div>:
div p {
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
El selector de hijos selecciona todos los elementos que son hijos de un elemento especificado.
El siguiente ejemplo selecciona todos los elementos <p> que son hijos de un <div> elemento:
div > p {
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</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>
El selector de hermanos adyacente se utiliza para seleccionar un elemento que está directamente después de otro elemento específico.
Los elementos hermanos deben tener el mismo elemento padre y "adyacente" significa "siguiendo inmediatamente".
El siguiente ejemplo selecciona el primer elemento <p> que se coloca inmediatamente después de los elementos <div>:
div + p {
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</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 selector de hermanos general selecciona todos los elementos que son hermanos próximos de un elemento específico.
El siguiente ejemplo selecciona todos los elementos <p> que son hermanos próximos de los elementos <div>:
div ~ p {
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</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>
Ejemplo :
div p
Descripción de ejemplo:
Selecciona todos los elementos <p> dentro de los elementos <div>
Ejemplo :
div > p
Descripción de ejemplo:
Selecciona todos los elementos <p> donde el padre es un elemento <div>
Ejemplo :
div + p
Descripción de ejemplo:
Selecciona el primer elemento <p> que se coloca inmediatamente después de los elementos <div>
Ejemplo :
p ~ ul
Descripción de ejemplo:
Selecciona cada elemento <ul> precedido por un elemento <p>