5.1 Tipos de Seletores
Seletores combinados em CSS permitem escolher elementos com base em seu posicionamento relativo na árvore DOM. Eles fornecem um controle mais preciso sobre os estilos, permitindo estilizar elementos dependendo do seu contexto. Em CSS, existem vários tipos de seletores combinados: descendentes, filho, irmão adjacente e irmão geral.
Tipos de seletores combinados:
- Seletor descendente (Descendant Selector)
- Seletor de filho (Child Selector)
- Seletor de irmão adjacente (Adjacent Sibling Selector)
- Seletor de irmão geral (General Sibling Selector)
5.2 Seletor Descendente
O seletor descendente escolhe todos os elementos que são descendentes de um elemento especificado. Consideram-se descendentes todos os elementos que estão dentro de um elemento especificado em qualquer nível de aninhamento (podem ser filhos, netos, bisnetos, etc.).
Sintaxe:
elemento-pai descendente {
propriedade: valor;
propriedade: valor;
}
Exemplo:
/* Escolhe todos os <p> que estão dentro de <div> */
div p {
color: blue;
}
<div>
<p>Este parágrafo será azul.</p>
<div>
<p>Este parágrafo também será azul, pois é um descendente do "div".</p>
</div>
</div>
<p>Este parágrafo não será azul.</p>
5.3 Seletor de Filho
O seletor de filho escolhe apenas aqueles elementos que são filhos diretos de um elemento pai especificado.
Sintaxe:
elemento-pai > filho {
propriedade: valor;
propriedade: valor;
}
Exemplo:
/* Escolhe apenas <p> que são filhos diretos do .container */
.container > p {
color: green;
}
<div class="container">
<p>Este parágrafo será verde.</p>
<div class="wrapper">
<p>Este parágrafo não será verde, pois não é um filho direto do .container.</p>
</div>
<p>Este parágrafo será verde.</p>
</div>
<p>Este parágrafo não será verde.</p>
5.4 Seletor de Irmão Adjacente
O seletor de irmão adjacente escolhe um elemento que segue imediatamente após um elemento especificado e está no mesmo nível de aninhamento.
Sintaxe:
anterior + seguinte {
propriedade: valor;
propriedade: valor;
}
/* Escolhe o <p> que segue imediatamente após <h1> */
h1 + p {
color: red;
}
<h1>Cabeçalho 1</h1>
<p>Este parágrafo será vermelho, pois segue imediatamente após "h1".</p>
<p>Este parágrafo não será vermelho.</p>
5.5 Seletor de Irmão Geral
O seletor de irmão geral escolhe todos os elementos que seguem um elemento especificado e estão no mesmo nível de aninhamento.
Sintaxe:
anterior ~ seguinte {
propriedade: valor;
propriedade: valor;
}
Exemplo:
/* Escolhe todos os <p> que seguem <h1> no mesmo nível de aninhamento */
h1 ~ p {
color: purple;
}
<h1>Cabeçalho 1</h1>
<p>Este parágrafo será roxo.</p>
<p>Este parágrafo também será roxo.</p>
<div>
<p>Este parágrafo não será roxo, pois está em um nível diferente de aninhamento.</p>
</div>
GO TO FULL VERSION