Aprenda Aperfeiçoando Estilos com Pseudo-Classes de Ação do Usuário

Pseudoclasses de ação do usuário estilizam um elemento interativo com base em seu estado atual. Isso auxilia a incentivar os usuários e informar o que acabou de acontecer. Geralmente, adicionamos as pseudoclasses de estado aos elementos <button> e <a>.

A sintaxe é a seguinte:

selector:pseudo-class {
  property: value;
}

selector pode ser qualquer seletor considerado nos capítulos anteriores;
pseudo-class requer : antes de sua declaração, e não adicionamos espaço.

Nota

Serão consideradas as pseudoclasses de estado mais úteis (hover, focus, active e visited).

:hover

A pseudoclasse :hover é utilizada para responder às ações do usuário ao interagir com um item usando um dispositivo apontador, como ao passar o cursor do mouse sobre o item. É possível testar isso no exemplo a seguir, passando o mouse sobre os elementos button e a para visualizar o efeito.

index.html

styles.css

:focus

A pseudo-classe :focus funciona de maneira semelhante à pseudo-classe :hover. Ela responde ao foco do elemento, que normalmente é alcançado por meio da navegação pelo teclado usando a tecla "Tab". Para garantir consistência no comportamento dos elementos interativos para todos os usuários, recomenda-se utilizar ambas as pseudo-classes juntas na estilização. Dessa forma, usuários que navegam com o mouse e aqueles que utilizam o teclado terão a mesma experiência.

A diferença entre :hover e :focus

:hover reage à atividade do cursor do mouse;
:focus reage à atividade do teclado (tecla "Tab").

No exemplo a seguir, temos o mesmo elemento com diferentes pseudo-classes. Observe o arquivo styles.css. Podemos notar que é possível adicionar os mesmos estilos para os efeitos de hover e focus separando o seletor e a pseudo-classe com ,.

index.html

styles.css

:active

:active é acionado quando um item é ativado, por exemplo, ao clicar em um link. Embora qualquer elemento possa ser ativado, essa pseudo-classe é geralmente utilizada para links e botões.

index.html

styles.css

:visited

A pseudo-classe :visited é aplicada a links que já foram visitados. Por padrão, os links são exibidos em azul e mudam para roxo quando visitados.

index.html

styles.css

1. Qual pseudo-classe é acionada quando o usuário passa o mouse sobre um elemento?

2. Qual pseudo-classe é aplicada a um link que já foi visitado?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 1. Capítulo 6

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.56

Deslize para mostrar o menu

A sintaxe é a seguinte:

selector:pseudo-class {
  property: value;
}

selector pode ser qualquer seletor considerado nos capítulos anteriores;
pseudo-class requer : antes de sua declaração, e não adicionamos espaço.

Nota

Serão consideradas as pseudoclasses de estado mais úteis (hover, focus, active e visited).

:hover

index.html

styles.css

:focus

A diferença entre :hover e :focus

:hover reage à atividade do cursor do mouse;
:focus reage à atividade do teclado (tecla "Tab").

index.html

styles.css

:active

:active é acionado quando um item é ativado, por exemplo, ao clicar em um link. Embora qualquer elemento possa ser ativado, essa pseudo-classe é geralmente utilizada para links e botões.

index.html

styles.css

:visited

A pseudo-classe :visited é aplicada a links que já foram visitados. Por padrão, os links são exibidos em azul e mudam para roxo quando visitados.

index.html

styles.css

1. Qual pseudo-classe é acionada quando o usuário passa o mouse sobre um elemento?

2. Qual pseudo-classe é aplicada a um link que já foi visitado?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 1. Capítulo 6