Pseudoclasses

7.1 Pseudoclasses de estado

Pseudoclasses em CSS são palavras-chave especiais que são adicionadas aos seletores para indicar o estado de um elemento ou sua posição na estrutura do documento. Elas permitem aplicar estilos a elementos em determinados estados ou situações, que não podem ser especificados usando seletores comuns.

Pseudoclasses principais:

• Pseudoclasses de estado
• Pseudoclasses de estado estrutural
• Pseudoclasses de formulário
• Pseudoclasses de navegação

Sintaxe:

    
      seletor:pseudoclasse {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Pseudoclasses de estado

Essas pseudoclasses são usadas para estilizar elementos de acordo com seu estado atual, por exemplo, quando o mouse é posicionado sobre ele ou um elemento está ativo:

• :hover — aplicado quando o usuário posiciona o cursor sobre o elemento
• :active — aplicado quando o elemento é ativado (geralmente ao clicar)
• :focus — aplicado quando o elemento está em foco (por exemplo, ao usar o teclado)
• :visited — aplicado a links visitados
• :link — aplicado a links não visitados

7.2 Pseudoclasse hover

A pseudoclasse :hover é aplicada ao elemento quando o usuário posiciona o ponteiro do mouse sobre ele. É usada com frequência para alterar a aparência de links e botões ao passar o mouse.

Sintaxe:

    
      seletor:hover {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

Este seletor altera a cor do texto e sublinha os links ao passar o mouse.

    
      <a href="#">Link Placeholder</a>
    
  

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

Aplicação:

• Melhora a interação com o usuário (UI) através de feedback visual
• Usado para botões, links e outros elementos interativos

7.3 Pseudoclasse focus

A pseudoclasse :focus é aplicada ao elemento quando ele recebe foco. Por exemplo, ao clicar nele ou ao navegar para ele usando a tecla Tab. É mais comumente usado para inputs e outros elementos de formulário.

Sintaxe:

    
      seletor:focus {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

Este seletor altera a cor da borda do input e remove o contorno ao receber foco.

    
      <input type="text" name="text" id="text">
    
  

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

Aplicação:

• Melhora a acessibilidade das páginas web
• Torna elementos interativos mais perceptíveis ao focar

7.4 Pseudoclasse nth-child

A pseudoclasse :nth-child é aplicada a elementos com base em sua posição entre os elementos filhos do pai. Ela aceita um argumento, que pode ser um número, palavra-chave ou expressão.

Sintaxe:

    
      seletor:nth-child(n) {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

Este seletor permite aplicar estilos a elementos com base na sua posição entre os irmãos.

    
      <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
        <li>Elemento 5</li>
        <li>Elemento 6</li>
        <li>Elemento 7</li>
      </ul>
    
  

    
      /* Aplica estilos a todos os filhos ímpares */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Aplica estilos a todos os filhos pares */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Aplica estilo ao segundo filho */
      li:nth-child(2) {
          color: red;
      }
    
  

Aplicação:

• Estiliza linhas de tabelas, elementos de lista e outras estruturas repetitivas
• Permite criar layouts e estilos complexos sem adicionar classes adicionais

7.5 Exemplos de uso de pseudoclasses

    
      <button type="button">Botão</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Estilizando linhas pares da tabela:

    
      <table>
        <tr>
          <th>Nome</th>
          <th>Quantidade</th>
          <th>Preço</th>
        </tr>
        <tr>
          <td>Produto 1</td>
          <td>5</td>
          <td>10 reais</td>
        </tr>
        <tr>
          <td>Produto 2</td>
          <td>3</td>
          <td>15 reais</td>
        </tr>
        <tr>
          <td>Produto 3</td>
          <td>8</td>
          <td>7 reais</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Excluindo determinados elementos do estilo geral:

    
      <ul>
        <li class="list-item">Elemento 1</li>
        <li class="list-item">Elemento 2</li>
        <li class="list-item">Elemento 3</li>
        <li class="list-item">Elemento 4</li>
        <li class="list-item">Elemento 5</li>
        <li class="list-item">Elemento 6</li>
        <li class="list-item">Elemento 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }