Introdução aos Pseudoclasses

1.1 Pseudoclasses

Pseudoclasses em CSS — são palavras-chave especiais que são adicionadas aos seletores para indicar seu estado ou posição na árvore do documento. Eles permitem estilizar elementos com base em seu estado ou relação com outros elementos sem a necessidade de adicionar classes ou IDs no código HTML.

Conceitos básicos das pseudoclasses

1. Definindo o estado de um elemento:
   • Pseudoclasses podem indicar o estado de um elemento, como quando o mouse passa por cima, quando está em foco ou ativado.
2. Definindo a posição de um elemento:
   • Pseudoclasses podem indicar a posição de um elemento em relação a seu pai ou outros elementos, como o primeiro ou o último elemento.
3. Casos especiais e grupos lógicos:
   • Pseudoclasses também podem definir casos especiais, como o primeiro elemento de um tipo ou elemento ímpar/par.

Como usar pseudoclasses

Pseudoclasses são adicionadas ao seletor usando dois pontos (:). Elas podem ser usadas tanto com seletores de elementos quanto com classes, IDs e outros seletores.

Sintaxe:

    
      seletor:pseudoclasse {
        propriedades: valores;
      }
    
  

Exemplos de uso

1. Seletor de elemento com pseudoclasse

Neste exemplo, todos os primeiros parágrafos (<p>) dentro de seus elementos pais estarão em negrito:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Seletor de classe com pseudoclasse

Neste exemplo, o fundo de todos os elementos com a classe .button ficará azul quando o mouse passar por cima:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Seletores combinados com pseudoclasses

Neste exemplo, todos os parágrafos pares (<p>) dentro dos elementos com a classe .container ficarão vermelhos:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Exemplos de pseudoclasses e suas aplicações

1. Pseudoclasses que definem estado

Pseudoclasses que definem o estado de um elemento permitem alterar sua estilização com base na interação do usuário ou no estado do elemento.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudoclasses que definem posição

Pseudoclasses que definem a posição de um elemento permitem aplicar estilos a elementos com base em sua localização na estrutura DOM.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudoclasses para grupos lógicos

Essas pseudoclasses permitem estilizar elementos com base em seus grupos lógicos ou tipos.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }