Um combinador é algo que explica o relacionamento entre os seletores.
Um seletor CSS pode conter mais de um seletor simples. Entre o simples seletores, podemos incluir um combinador.
Existem quatro combinadores diferentes em CSS:
seletor descendente (espaço)
seletor filho (>)
seletor de irmão adjacente (+)
seletor geral de irmãos (~)
O seletor descendente corresponde a todos os elementos que são descendentes de um determinado elemento.
O exemplo a seguir seleciona todos os elementos <p> dentro dos elementos <div>:
div p {
background-color: yellow;
}Experimente você mesmo →
<!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>
O seletor filho seleciona todos os elementos que são filhos de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> que são filhos de um <div> elemento:
div > p {
background-color: yellow;
}Experimente você mesmo →
<!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>
O seletor irmão adjacente é usado para selecionar um elemento que é diretamente depois de outro elemento específico.
Os elementos irmãos devem ter o mesmo elemento pai e "adjacente" significa "imediatamente seguindo".
O exemplo a seguir seleciona o primeiro elemento <p> colocado imediatamente após os elementos <div>:
div + p {
background-color: yellow;
}Experimente você mesmo →
<!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>
O seletor geral de irmãos seleciona todos os elementos que são os próximos irmãos de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> que são próximos irmãos dos elementos <div>:
div ~ p {
background-color: yellow;
}Experimente você mesmo →
<!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>
Exemplo :
div p
Descrição de exemplo:
Seleciona todos os elementos <p> dentro dos elementos <div>
Exemplo :
div > p
Descrição de exemplo:
Seleciona todos os elementos <p> onde o pai é um elemento <div>
Exemplo :
div + p
Descrição de exemplo:
Seleciona o primeiro elemento <p> colocado imediatamente após os elementos <div>
Exemplo :
p ~ ul
Descrição de exemplo:
Seleciona todos os elementos <ul> precedidos por um elemento <p>