5.5.2 Pseudo-elementos & Seletores Avançados no CSS

Pseudo-elementos estilizam partes específicas de um elemento sem precisar alterar o HTML diretamente.

🔹 ::before e ::after

Permitem inserir conteúdo artificial antes ou depois de um elemento.

Pseudo-elemento	Descrição
::before	Insere conteúdo antes do elemento
::after	Insere conteúdo depois do elemento

Exemplo:

cssCopiarEditarh1::before {
  content: "👉 ";
}

h1::after {
  content: " 👈";
}

💡 Isso adiciona emojis antes e depois do título sem mudar o HTML!

---

🔹 ::selection

Aplica estilo ao texto selecionado pelo usuário (como quando ele arrasta o mouse sobre o texto).

cssCopiarEditar::selection {
  background: yellow;
  color: black;
}

---

🔹 ::first-line e ::first-letter

Usados para estilizar a primeira linha ou a primeira letra de um bloco de texto.

cssCopiarEditarp::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2rem;
  color: red;
}

---

🚀 Seletores Avançados (CSS3+)

---

🔹 :has() – Seletor Parental (experimental)

Seleciona um elemento pai que contém um elemento específico.

cssCopiarEditararticle:has(img) {
  border: 2px solid green;
}

💡 Aplica borda a <article> apenas se contiver uma <img>.

⚠️ Suporte ainda limitado em alguns navegadores. Teste antes!

---

🔹 :is() – Agrupamento inteligente

Simplifica a escrita de seletores múltiplos com a mesma regra.

cssCopiarEditar:is(h1, h2, h3) {
  font-family: 'Arial';
}

🔹 É útil para evitar repetição e aumentar a legibilidade.

---

🔹 :where() – Sem especificidade

Igual ao :is(), mas com zero peso de especificidade. Ideal para estilos padrão e resets.

cssCopiarEditar:where(article, section) {
  margin: 0;
  padding: 0;
}

---

🔹 :empty – Elemento sem conteúdo

Seleciona elementos vazios (sem filhos ou texto).

cssCopiarEditardiv:empty {
  display: none;
}

💡 Oculta automaticamente <div> sem conteúdo.