# 5.5.1 Pseudo-classes em CSS #### 🔹 **1. Interação do Usuário** Afetam os estilos de elementos com base na **interação do usuário**, como mouse ou clique. | Pseudo-classe | Descrição | Exemplo | | ------------- | ------------------------------------------- | --------------- | | `:hover` | Quando o mouse está sobre o elemento | `a:hover` | | `:active` | Quando o elemento está sendo clicado | `button:active` | | `:focus` | Quando o elemento está em foco (input, etc) | `input:focus` | ```css cssCopiarEditarbutton:hover { background-color: #0055ff; color: white; } ``` *** #### 🔹 **2. Posição em Listas** Permitem estilizar elementos com base na **posição em uma lista ou grupo**. | Pseudo-classe | Descrição | Exemplo | | ----------------- | --------------------------------------------- | ------------------ | | `:first-child` | Primeiro filho dentro do elemento pai | `li:first-child` | | `:last-child` | Último filho dentro do elemento pai | `li:last-child` | | `:nth-child(n)` | Seleciona o filho na posição **n** | `li:nth-child(2)` | | `:nth-of-type(n)` | Seleciona o elemento do tipo na posição **n** | `p:nth-of-type(3)` | | `:only-child` | Quando é o **único filho** | `div:only-child` | ```css cssCopiarEditarul li:first-child { font-weight: bold; } ``` *** #### 🔹 **3. Estados de Formulários** Estilizam elementos com base em seu **estado funcional**. | Pseudo-classe | Descrição | Exemplo | | -------------------- | --------------------------------- | ------------------------- | | `:checked` | Elemento marcado (checkbox/radio) | `input:checked` | | `:disabled` | Elemento desativado | `button:disabled` | | `:enabled` | Elemento habilitado | `input:enabled` | | `:required` | Campo obrigatório | `input:required` | | `:optional` | Campo não obrigatório | `input:optional` | | `:valid` | Campo com valor válido | `input:valid` | | `:invalid` | Campo com valor inválido | `input:invalid` | | `:placeholder-shown` | Quando o placeholder está visível | `input:placeholder-shown` | ```css cssCopiarEditarinput:focus { border: 2px solid blue; } ``` *** #### 🔹 **4. Pseudo-classes Avançadas** Permitem uma **seleção mais precisa e contextual**. | Pseudo-classe | Descrição | Exemplo | | ---------------- | ------------------------------------------------ | -------------------------- | | `:not(selector)` | Exclui elementos que correspondem ao seletor | `p:not(.destaque)` | | `:empty` | Seleciona elementos sem filhos ou texto | `div:empty` | | `:root` | Seleciona o elemento raiz (``) | `:root` | | `:is()` | Agrupa múltiplos seletores para otimização | `:is(h1, h2, h3)` | | `:where()` | Igual ao `:is`, mas com **zero especificidade** | `:where(section, article)` | | `:has()` | (Novo) Seleciona elementos que **contêm outros** | `div:has(img)` | ```css cssCopiarEditarp:not(.importante) { color: gray; } ``` > ⚠️ `:has()` ainda tem suporte limitado em alguns navegadores. Teste antes de usar em produção.