CSS
combinadores
Um combinador é algo que explica o relacionamento entre os
seletores. Um combinador é algo que explica o relacionamento entre os
seletores.
Quatro combinadores diferentes em CSS:
Seletor Descendente
O seletor
descendente corresponde a todos os elementos que são descendentes de um
elemento especificado.
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Seletor Descendente</h2>
<p>O seletor descendente corresponde a
todos os elementos que são descendentes de um elemento especificado.</p>
<div>
<p>Parágrafo 1 na div.</p>
<p>Parágrafo 2 na div.</p>
<section><p>Parágrafo 3 na div.</p></section>
</div>
<p>Parágrafo 4. Não está em uma
div.</p>
<p>Parágrafo 5. Não está em uma
div.</p>
</body>
</html>
Seletor
filho (>)
O seletor filho seleciona todos os elementos que são filhos de um
elemento especificado.
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Seletor filho</h2>
<p>O seletor filho (>) seleciona
todos os elementos que são filhos de um elemento especificado.</p>
<div>
<p>Parágrafo 1 na div.</p>
<p>Parágrafo 2 na div.</p>
<section>
<!-- not Child but Descendant -->
<p>Parágrafo 3 na div (dentro de um elemento de seção).</p>
</section>
<p>Parágrafo 4 na div.</p>
</div>
<p>Parágrafo 5. Não está em uma
div.</p>
<p>Parágrafo 6. Não está em uma
div.</p>
</body>
</html>
Seletor
de irmãos adjacentes (+)
O
seletor irmão adjacente é usado para selecionar um elemento que está
diretamente após outro elemento específico.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Seletor de irmãos
adjacentes</h2>
<p>O seletor + é usado para
selecionar um elemento que está diretamente após outro elemento
específico</p>
<p>O exemplo a seguir seleciona o
primeiro elemento p colocado imediatamente após os elementos div:</p>
<div>
<p>Parágrafo 1 na div.</p>
<p>Parágrafo 2 na div.</p>
</div>
<p>Parágrafo 4. Após um
div.</p>
<p>Parágrafo 4. Após um
div.</p>
<div>
<p>Parágrafo 5 na div.</p>
<p>Parágrafo 6 na div.</p>
</div>
<p>Parágrafo 7 na div.</p>
<p>Parágrafo 8 na div.</p>
</body>
</html>
Seletor
Geral de Irmãos (~)
O
seletor geral de irmãos seleciona todos os elementos que são próximos irmãos de
um elemento especificado.
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Seletor geral de
irmãos</h2>
<p>O seletor geral de irmãos (~)
seleciona todos os elementos que são próximos irmãos de um elemento
especificado. </p>
<p>Parágrafo 1.</p>
<div>
<p>Parágrafo 2.</p>
</div>
<p>Parágrafo 3.</p>
<code>Some code.</code>
<p>Parágrafo 4.</p>
</body>
</html>