:hover :focus :active e :visited
Estilize os estados interativos de links e botões usando as pseudo-classes CSS mais comuns.
:hover :focus :active e :visited é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que são pseudoclasses?
As pseudoclasses selecionam elementos com base no seu estado ou na relação com outros elementos. Elas começam com dois-pontos simples : e não exigem a adição de atributos ao HTML.
:hover
:hover aplica-se quando o ponteiro do usuário está sobre um elemento. É o seletor de estado interativo mais comum.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus aplica-se quando um elemento recebe foco (por meio da tecla Tab ou de foco programático). É essencial para a acessibilidade.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible é uma versão mais inteligente de :focus — ela exibe o anel de foco somente quando o foco foi recebido pelo teclado, não pelo mouse. Assim, usuários do teclado têm indicadores de foco sem anéis causados por cliques do mouse.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within aplica-se a um elemento quando qualquer um de seus descendentes recebe foco. É útil para estilizar contêineres de formulários ou barras de pesquisa quando estão ativas.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active aplica-se enquanto um elemento está sendo ativado — durante um clique do mouse ou um toque. Isso cria um retorno visual para elementos interativos.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited aplica estilos a links que o usuário já visitou. Por questões de privacidade, somente um conjunto limitado de propriedades pode ser estilizado com :visited (cor, cor de fundo, cor da borda e cor do contorno).
<a href="#" class="demo-visited">Visited link</a>
Ordem dos estados dos links (LVHA)
Ao estilizar os quatro estados de um link, siga a ordem LVHA para evitar problemas de especificidade: Link, Visitado, Hover, Ativo.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover em dispositivos sensíveis ao toque
As telas sensíveis ao toque não têm um estado de hover da mesma forma que os mouses. :hover pode ser ativado brevemente ao tocar. Para interações específicas de toque, use :active ou a consulta de mídia @media (hover: none).
Combinação de estados
As pseudoclasses podem ser encadeadas para estilizar vários estados simultaneamente:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Transição dos estados de hover
Crie efeitos suaves de hover usando transições no estado base (não no estado :hover), para que a transição ocorra nas duas direções:
<button class="btn demo-hover">Hover transitions smoothly</button>
Verificação rápida
Qual pseudoclasse exibe estilos de foco somente para a navegação pelo teclado, e não para cliques do mouse?
Recapitulação
:hover é ativado quando o ponteiro passa sobre o elemento; :focus, quando uma entrada recebe foco; :active, durante um clique; :visited, para links visitados. Use :focus-visible para anéis de foco exclusivos do teclado. Siga a ordem LVHA para os estados dos links. Sempre forneça indicadores de foco visíveis para garantir a acessibilidade.
Perguntas Frequentes
A aula “:hover :focus :active e :visited” é grátis?
Sim — o texto completo de “:hover :focus :active e :visited” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “:hover :focus :active e :visited”?
Estilize os estados interativos de links e botões usando as pseudo-classes CSS mais comuns. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “:hover :focus :active e :visited”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e Pseudo-classes de Estado de Formulários