Combinadores CSS são usados para definir a relação entre seletores em CSS. Eles ajudam na seleção de elementos com base em sua relação com outros elementos, o que permite uma estilização mais precisa e eficiente. Discutiremos alguns combinadores CSS principais e seus casos de uso, começando com o combinador descendente. Um combinador descendente é usado para direcionar elementos correspondentes ao segundo seletor se eles estiverem aninhados dentro de um elemento ancestral que corresponda ao primeiro seletor. Um ancestral pode ser um elemento pai ou o pai do pai. Para entender melhor como isso funciona, vamos dar uma olhada em um exemplo.

<link rel="stylesheet" href="styles.css">

<figure>
  <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Relaxing Cat">
  <figcaption>A relaxing cat with a border</figcaption>
</figure>

figure img {
  border: 4px solid red;
}

No exemplo acima, usamos o combinador descendente para selecionar todos os elementos de imagem dentro dos elementos figure e aplicar uma borda solid red em todos os quatro lados. Observe que um space é usado entre o seletor pai e o seletor filho. Neste caso, o figure seria o pai e o img seria o filho. Se você tivesse várias imagens dentro de um elemento figure, usar o combinador descendente seria uma boa maneira de aplicar uma borda preta sólida ao redor de cada uma dessas imagens. Outro tipo de combinador seria o combinador filho. O combinador filho (>) em CSS é usado para selecionar elementos que são filhos diretos de um elemento pai especificado. Este combinador tem como alvo apenas elementos com um pai específico, tornando suas regras CSS mais precisas e prevenindo estilizações indesejadas de elementos aninhados mais profundos. Vamos dar uma olhada no seguinte exemplo de HTML:

<div class="container">
  <p>First</p>
  <div>
    <p>Second</p>
  </div>
  <div>
    <p>Third</p>
  </div>
</div>

Na estrutura HTML acima, a classe container é aplicada a um elemento div. Dentro deste container, há um elemento filho direto p ("First"), seguido por dois elementos adicionais div, cada um contendo um elemento p ("Second" e "Third"). O primeiro elemento p é um filho direto do elemento .container, enquanto os outros dois elementos p estão aninhados dentro de outros elementos div, tornando-os descendentes mais profundos. Para aplicar estilos apenas ao filho direto da classe container, você pode usar o combinador filho assim:

<link rel="stylesheet" href="styles.css">

<div class="container">
  <p>First</p>
  <div>
    <p>Second</p>
  </div>
  <div>
    <p>Third</p>
  </div>
</div>

.container > p {
  color: blue;
}

No exemplo acima, estamos direcionando apenas o filho direto da classe container. Isso dará ao filho direto a cor do texto blue. Porque os outros dois elementos de parágrafo estão aninhados dentro de elementos div, eles não são considerados filhos diretos da classe container e não receberão a cor do texto azul. Outro combinador comum seria o combinador de próximo-irmão. O combinador next-sibling (+) em CSS seleciona um elemento que segue imediatamente um elemento irmão especificado. Este combinador é útil quando você quer aplicar estilos a um elemento que segue diretamente outro elemento, permitindo uma estilização direcionada com base na posição do elemento em relação aos seus irmãos. Vamos dar uma olhada no seguinte exemplo de HTML:

<figure>
  <img
    src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg"
    alt="A cute orange cat lying on its back."
  />
  <figcaption>A cute orange cat lying on its back.</figcaption>
</figure>

Aqui, temos um elemento figure contendo um elemento img seguido por um elemento figcaption. O elemento figcaption é o irmão imediato do elemento img. Se você quiser aplicar uma borda preta ao redor do elemento figcaption, pode usar o combinador de próximo-irmão assim:

<link rel="stylesheet" href="styles.css">

<figure>
  <img
    src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg"
    alt="A cute orange cat lying on its back."
  />
  <figcaption>A cute orange cat lying on its back.</figcaption>
</figure>

img + figcaption {
  border: 4px solid black;
}

Neste exemplo, o combinador next-sibling (+) seleciona o elemento figcaption que segue imediatamente o elemento img. A regra CSS aplicada adiciona uma 4px solid black border ao redor do figcaption. Outro combinador comum é o combinador subsequent-sibling. O combinador subsequent-sibling (~) em CSS seleciona todos os irmãos de um elemento especificado que vêm depois dele. Ao contrário do combinador next-sibling, que seleciona apenas o irmão imediatamente seguinte, o combinador subsequent-sibling (~) pode selecionar quaisquer irmãos que seguem o elemento especificado, oferecendo maior flexibilidade na estilização. Vamos dar uma olhada no seguinte exemplo de HTML:

<div class="container">
  <h2>Subheading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
  <p>Another paragraph element</p>
</div>

Nesta estrutura HTML, temos um elemento h2 seguido por quatro elementos de parágrafo. Os elementos de parágrafo são irmãos do elemento h2. Se você quiser estilizar todos os elementos de parágrafo que vêm depois do elemento h2, então você pode usar o combinador subsequent-sibling assim:

<link rel="stylesheet" href="styles.css">

<div class="container">
  <h2>Subheading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
  <p>Another paragraph element</p>
</div>

h2 ~ p {
  color: green;
}

Neste exemplo, todos os elementos de parágrafo que seguem o elemento h2 terão a cor do texto verde. O combinador subsequent-sibling (~) seleciona todos os irmãos parágrafos que aparecem após o elemento h2, independentemente de serem irmãos imediatos. Em conclusão, entender e usar vários combinadores CSS permite que você aplique estilos precisos aos seus elementos HTML, aumentando o controle e a flexibilidade do seu design. Dominando esses seletores, você pode criar regras de estilo mais sofisticadas e direcionadas que melhoram tanto a aparência quanto a funcionalidade das suas páginas web.