Seletores Combinados

1. Tipos de Seletores Combinados

Seletores combinados no CSS permitem escolher elementos com base em sua posição hierárquica em relação a outros elementos. Isso é útil para aplicar estilos a elementos dependentes do contexto ou quando precisamos estilizar elementos em uma estrutura complexa. Os seletores combinados são uma ferramenta poderosa para uma seleção precisa quando uma única classe ou identificador não é suficiente. Vamos observar os principais tipos de seletores combinados no CSS, incluindo o seletor descendente, o seletor de filho, o seletor de irmão adjacente e o seletor de irmãos gerais.

Os seletores combinados no CSS incluem várias maneiras de selecionar elementos com base na hierarquia do HTML. Os principais tipos de seletores combinados são:

• Seletor Descendente (Descendant Selector): seleciona elementos que estão dentro de outro elemento, em qualquer nível de profundidade.
• Seletor de Filho (Child Selector): seleciona apenas os descendentes diretos de um determinado elemento.
• Seletor de Irmão Adjacente (Adjacent Sibling Selector): seleciona o elemento que vem imediatamente após outro elemento no mesmo nível hierárquico.
• Seletor de Irmãos Gerais (General Sibling Selector): seleciona todos os elementos no mesmo nível que seguem o elemento especificado.

Cada um desses seletores é adequado para diferentes casos e permite selecionar com precisão os elementos dependendo de sua localização na página.

2. Seletor Descendente (Descendant Selector)

O seletor descendente seleciona todos os elementos dentro de outro elemento, independentemente do nível de profundidade. Ele é escrito com um espaço entre os seletores. Esse tipo de seletor é útil quando precisamos estilizar elementos dentro de outro elemento, como todos os <p> dentro de um <div> com uma classe específica.

.container p {
  color: blue;
}

<div class="container">
  <p>Esse texto ficará azul porque está dentro do container.</p>
  <div>
    <p>Esse texto também ficará azul.</p>
  </div>
</div>
<p>Esse texto não será alterado porque não está dentro do container.</p>

Aqui, o seletor .container p selecionará todos os elementos <p> dentro do elemento com a classe container, incluindo elementos em qualquer nível de profundidade.

3. Seletor de Filho (Child Selector)

O seletor de filho seleciona apenas os descendentes diretos de um elemento. Ele é escrito usando o símbolo > entre os seletores. Esse seletor é útil quando precisamos aplicar estilo apenas aos elementos de primeiro nível e ignorar os níveis mais profundos.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Esse texto será negrito.</p>
    <div>
      <p>Esse texto permanecerá normal porque não é um descendente direto do container.</p>
    </div>
  </div>
      
    

Aqui, apenas o primeiro <p> ficará em negrito porque é um descendente direto do .container, enquanto o <p> aninhado não será alterado.

4. Seletor de Irmão Adjacente (Adjacent Sibling Selector)

O seletor de irmão adjacente seleciona o elemento que vem diretamente após outro elemento e que está no mesmo nível hierárquico. Esse seletor é representado pelo símbolo + entre os seletores e é útil para aplicar estilos ao primeiro elemento que segue outro, como o primeiro parágrafo que vem depois de um título.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Título</h2>
  <p>Esse texto ficará verde porque vem diretamente após o título.</p>
  <p>Esse texto não será alterado porque não é um elemento adjacente ao h2.</p>
      
    

Aqui, o seletor h2 + p mudará a cor apenas do primeiro parágrafo <p> que vem diretamente após o <h2>.

5. Seletor de Irmãos Gerais (General Sibling Selector)

O seletor de irmãos gerais seleciona todos os elementos no mesmo nível hierárquico que vêm após o elemento especificado, independentemente de estarem diretamente após ele ou não. Esse seletor é representado pelo símbolo ~ entre os seletores.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Título</h2>
  <p>Esse parágrafo será em itálico.</p>
  <div>
    <p>Esse parágrafo também será em itálico porque é um irmão do h2 no mesmo nível hierárquico.</p>
  </div>
      
    

Neste exemplo, o seletor h2 ~ p seleciona todos os elementos <p> que vêm após <h2> no mesmo nível, independentemente de haver outros elementos entre eles.

6. Exemplo de Uso de Todos os Seletores Combinados

Abaixo está um exemplo de HTML e CSS que demonstra o uso de todos os seletores combinados para selecionar diferentes elementos dependendo de sua posição na página.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de Seletores Combinados CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Parágrafo que é descendente e filho direto de .container.</p>
    <div>
      <p>Parágrafo que é descendente, mas não filho direto de .container.</p>
    </div>
  </div>
  <h2>Título</h2>
  <p>Parágrafo que é um irmão adjacente ao h2.</p>
  <div>Esse bloco não afetará os parágrafos seguintes.</div>
  <p>Parágrafo que é um irmão geral do h2.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de Seletores Combinados CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Parágrafo que é descendente e filho direto de .container.</p>
    <div>
      <p>Parágrafo que é descendente, mas não filho direto de .container.</p>
    </div>
  </div>
  <h2>Título</h2>
  <p>Parágrafo que é um irmão adjacente ao h2.</p>
  <div>Esse bloco não afetará os parágrafos seguintes.</div>
  <p>Parágrafo que é um irmão geral do h2.</p>
</body>
</html>

/* Seletor Descendente */
.container p {
  color: blue;
}

/* Seletor de Filho */
.container > p {
  font-weight: bold;
}

/* Seletor de Irmão Adjacente */
h2 + p {
  color: green;
}

/* Seletor de Irmãos Gerais */
h2 ~ p {
  font-style: italic;
}