Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Aperfeiçoando Estilos com Pseudo-Classes de Ação do Usuário | Introdução ao CSS
Fundamentos de CSS

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

Pseudo-classes de ação do usuário permitem estilizar elementos com base em como os usuários interagem com eles. São comumente aplicadas a elementos <button> e <a> para fornecer feedback durante as interações.

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 nenhum espaço.
Note
Nota

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

:hover

Acionada quando o usuário aponta para um elemento com o cursor do mouse. Ideal para criar feedback visual interativo.

index.html

index.html

styles.css

styles.css

copy

:focus

Ativado quando um elemento recebe foco do teclado (geralmente pela tecla Tab). Para garantir acessibilidade, estilos de hover e focus são frequentemente combinados, proporcionando uma experiência consistente para usuários de mouse e teclado.

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

index.html

styles.css

styles.css

copy

:active

Acionado enquanto um elemento está sendo ativado, geralmente durante um clique do mouse em botões ou links.

index.html

index.html

styles.css

styles.css

copy

:visited

Aplica-se a links após o usuário já ter visitado seu destino. Os navegadores normalmente exibem links não visitados em azul e links visitados em roxo, a menos que esses estilos sejam substituídos.

index.html

index.html

styles.css

styles.css

copy

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

Suggested prompts:

Can you explain more about how to use :hover and :focus together for accessibility?

What are some best practices for styling navigation links with pseudo-classes?

Could you show examples of using :active and :visited with links?

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

Deslize para mostrar o menu

Pseudo-classes de ação do usuário permitem estilizar elementos com base em como os usuários interagem com eles. São comumente aplicadas a elementos <button> e <a> para fornecer feedback durante as interações.

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 nenhum espaço.
Note
Nota

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

:hover

Acionada quando o usuário aponta para um elemento com o cursor do mouse. Ideal para criar feedback visual interativo.

index.html

index.html

styles.css

styles.css

copy

:focus

Ativado quando um elemento recebe foco do teclado (geralmente pela tecla Tab). Para garantir acessibilidade, estilos de hover e focus são frequentemente combinados, proporcionando uma experiência consistente para usuários de mouse e teclado.

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

index.html

styles.css

styles.css

copy

:active

Acionado enquanto um elemento está sendo ativado, geralmente durante um clique do mouse em botões ou links.

index.html

index.html

styles.css

styles.css

copy

:visited

Aplica-se a links após o usuário já ter visitado seu destino. Os navegadores normalmente exibem links não visitados em azul e links visitados em roxo, a menos que esses estilos sejam substituídos.

index.html

index.html

styles.css

styles.css

copy

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 6
some-alt