O combinador `` (espaço em branco) seleciona os elementos que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
Sintaxe: elemento-pai elemento-filho
Como funciona: `div p` irá corresponder a qualquer elemento `
` que estiver dentro do elemento `
Exemplo:
<div>
<p>Usando o combinador "espaço"</p>
</div>
div p {
color: red;
font-weight: bold;
}
O combinador >
selecina elementos que são filhos diretos do elemento especificado anteriormente.
Sintaxe: elemento-pai > elemento-filho
Como funciona: section > p
irá corresponder a todo elemento <p>
qque estiver diretamente dentro de um elemento <section>
especificado.
Exemplo:
<section>
<p>1 - parágrafo</p>
<div>
<p>2 - parágrafo</p>
</div>
<p>3 - parágrafo</p>
</section>
section > p {
color: red;
}
O combinador +
seleciona os elementos que seguem imediatamente o elemento especificado anteriormente.
Sintaxe: primeiro-irmao + segundo-irmao
Como funciona: img + p
irá corresponder a qualquer elemento <p>
que segue imediatamente após um elemento <img>
.
Exemplo:
<div>
<p>1 - parágrafo</p>
<img src="http://ftt.unievangelica.edu.br/casa.jpg" title="casa" />
<p>2 - parágrafo</p>
<p>3 - parágrafo</p>
</div>
img + p {
color: red;
}
O combinador ~
seleciona os elementos que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, os elementos precisam compartilhar o mesmo pai.
Sintaxe: primeiro-irmao ~ segundo-irmao
Como funciona: img ~ p
irá corresponder a todo elemento <p>
que seguir um elemento <img>
dentro de um mesmo elemento pai.
Exemplo:
<div>
<p>1 - parágrafo</p>
<img src="http://ftt.unievangelica.edu.br/casa.jpg" title="casa" />
<p>2 - parágrafo</p>
<p>3 - parágrafo</p>
</div>
img ~ p {
color: blue;
}
Exemplos de utilização de Combinadores no Codepen;
Seletores
Seletores Básicos | Combinadores | Pseudo-classes | Pseudo-elementos