Pseudoclasses de estado

2.1 Pseudoclasse :hover

As pseudoclasses de estado permitem aplicar estilos aos elementos com base em sua interação com o usuário ou seu estado atual. Essas pseudoclasses são frequentemente usadas para melhorar a interface do usuário, fornecendo feedback visual sobre as ações do usuário.

A pseudoclasse :hover é aplicada a um elemento quando o usuário passa o cursor do mouse sobre ele.

Sintaxe:

    
      seletor:hover {
        propriedades: valores;
      }
    
  

Exemplo:

Neste exemplo, um link muda de cor e adiciona sublinhado ao passar o cursor, e um botão altera a cor de fundo e do texto.

    
      /* Estilização do link ao passar o cursor */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Estilização do botão ao passar o cursor */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Pseudoclasse :focus

A pseudoclasse :focus é aplicada a um elemento quando ele recebe o foco, por exemplo, ao clicar em um elemento de formulário ou ao navegar até ele usando a tecla Tab.

Sintaxe:

    
      seletor:focus {
        propriedades: valores;
      }
    
  

Exemplo:

Neste exemplo, um campo de entrada altera a cor da borda e remove o contorno ao ganhar foco, e uma área de texto muda a cor de fundo.

    
      /* Estilização do campo de entrada ao ganhar foco */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Estilização da área de texto ao ganhar foco */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Pseudoclasse :active

A pseudoclasse :active é aplicada a um elemento no momento em que é ativado pelo usuário, como ao clicar com o botão do mouse. Esta pseudoclasse é frequentemente usada para criar feedback visual ao pressionar elementos da interface.

Sintaxe:

    
      seletor:active {
        propriedades: valores;
      }
    
  

Exemplo:

Neste exemplo, um link muda a cor no momento do clique, e um botão altera a cor de fundo e encolhe um pouco, criando um efeito de pressão.

    
      /* Estilização do link no momento do clique */

      a:active {
        color: green;
      }

      /* Estilização do botão no momento do clique */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Pseudoclasse :visited

A pseudoclasse :visited é aplicada a links que o usuário já visitou. Ela permite estilizar links visitados de maneira diferente dos não visitados.

Sintaxe:

    
      seletor:visited {
        propriedades: valores;
      }
    
  

Exemplo

Neste exemplo, um link visitado muda para a cor púrpura para diferenciá-lo dos links não visitados:

    
      /* Estilização do link visitado */

      a:visited {
        color: purple;
      }
    
  

2.5 Combinando pseudoclasses

Pseudoclasses de estado podem ser combinadas para criar estilos interativos mais complexos. Por exemplo, você pode definir diferentes estilos para links com base em seu estado.

Exemplo de implementação completa

Neste exemplo, a estilização dos links muda com base em seu estado: estado básico, links visitados, links ao passar o cursor e links no momento do clique:

    
      /* Estilo básico para links */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Estilização do link visitado */

      a:visited {
        color: purple;
      }

      /* Estilização do link ao passar o cursor */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Estilização do link no momento do clique */

      a:active {
        color: green;
      }