5.5.1 Pseudo-classes em CSS
As pseudo-classes são palavras-chave adicionadas aos seletores para aplicar estilos a estados específicos de um elemento, como quando o usuário passa o mouse, um link é visitado,
🔹 1. Interação do Usuário
Afetam os estilos de elementos com base na interação do usuário, como mouse ou clique.
: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
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.
: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
cssCopiarEditarul li:first-child {
font-weight: bold;
}🔹 3. Estados de Formulários
Estilizam elementos com base em seu estado funcional.
: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
cssCopiarEditarinput:focus {
border: 2px solid blue;
}🔹 4. Pseudo-classes Avançadas
Permitem uma seleção mais precisa e contextual.
: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 (<html>)
: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)
cssCopiarEditarp:not(.importante) {
color: gray;
}⚠️
:has()ainda tem suporte limitado em alguns navegadores. Teste antes de usar em produção.
Last updated