5.5.3 Combinadores CSS

Combinadores são operadores que definem relações entre seletores, permitindo aplicar estilos com base na estrutura hierárquica do HTML. Eles são fundamentais para estilizar elementos de maneira conte

🔹 1. Descendente (espaço)

Seleciona todos os elementos que estão dentro de outro, em qualquer nível da hierarquia.

Sintaxe:

cssCopiarEditarpai filho {
  /* estilos */
}

Exemplo:

cssCopiarEditardiv p {
  color: blue;
}

💡 Todos os <p> dentro de um <div> (não importa o quão aninhado esteja) serão azuis.

---

🔹 2. Filho Direto (>)

Seleciona apenas os filhos diretos de um elemento pai.

Sintaxe:

cssCopiarEditarpai > filho {
  /* estilos */
}

Exemplo:

cssCopiarEditarul > li {
  list-style: square;
}

💡 Apenas os <li> que são filhos diretos de <ul> terão lista com quadrados.

---

🔹 3. Irmão Adjacente (+)

Seleciona o primeiro elemento imediatamente após outro, no mesmo nível (irmão).

Sintaxe:

cssCopiarEditarelemento1 + elemento2 {
  /* estilos */
}

Exemplo:

cssCopiarEditarh1 + p {
  font-style: italic;
}

💡 Apenas o <p> imediatamente após um <h1> ficará em itálico.

---

🔹 4. Irmão Geral (~)

Seleciona todos os elementos irmãos seguintes de um determinado elemento.

Sintaxe:

cssCopiarEditarelemento1 ~ elemento2 {
  /* estilos */
}

Exemplo:

cssCopiarEditarh1 ~ p {
  color: gray;
}

💡 Todos os <p> que forem irmãos e estiverem após um <h1> terão a cor cinza.