Pseudo-classes de estrutura

3.1 Pseudo-classe :first-child

As pseudo-classes de estrutura no CSS permitem selecionar e estilizar elementos com base na posição deles na árvore do documento. Isso é especialmente útil para criar estilos mais precisos e detalhados aplicados a elementos específicos. Vamos dar uma olhada nas pseudo-classes :first-child, :last-child, :nth-child e :nth-of-type.

A pseudo-classe :first-child seleciona o primeiro elemento filho de seu pai. Isso é útil para estilizar o primeiro elemento em um grupo de elementos similares, como listas ou parágrafos.

Sintaxe:

    
      seletor:first-child {
        propriedades: valores;
      }
    
  

Exemplo de uso

Neste exemplo, o primeiro item da lista é destacado em negrito e vermelho, e o primeiro parágrafo dentro do div é transformado em maiúsculas:

    
      /* Estilização do primeiro item da lista */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Estilização do primeiro parágrafo no div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Pseudo-classe :last-child

A pseudo-classe :last-child seleciona o último elemento filho de seu pai. Ela é usada para estilizar o último elemento em um grupo de elementos similares.

Sintaxe:

    
      seletor:last-child {
        propriedades: valores;
      }
    
  

Exemplo de uso

Neste exemplo, o último item da lista é destacado em itálico e azul, e o último parágrafo dentro do div é sublinhado:

    
      /* Estilização do último item da lista */

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

      /* Estilização do último parágrafo no div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Pseudo-classe :nth-child

A pseudo-classe :nth-child permite selecionar elementos com base na posição deles em um grupo. Ela aceita um argumento que define quais elementos serão selecionados. O argumento pode ser um número, palavra-chave ou expressão.

Sintaxe:

    
      seletornth-child(argumento) {
        propriedades: valores;
      }
    
  

Argumentos:

• Número: seleciona o elemento na posição especificada
• Palavras-chave: odd (ímpares) e even (pares)
• Expressão: formato an+b, onde a e b são números

Exemplo 1: Seleção de elementos ímpares

Neste exemplo, todos os itens ímpares da lista são estilizados com um fundo cinza-claro:

    
      /* Estilização de itens ímpares da lista */

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

Exemplo 2: Seleção de elementos em posição específica

Neste exemplo, o terceiro item da lista é destacado em negrito e verde:

    
      /* Estilização do terceiro item da lista */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Exemplo 3: Uso de expressões

Neste exemplo, cada segundo item, começando pelo primeiro, é estilizado com um fundo cinza-claro:

    
      /* Estilização de cada segundo item, começando pelo primeiro */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudo-classe :nth-of-type

A pseudo-classe :nth-of-type é parecida com a :nth-child, mas ela seleciona elementos com base no tipo deles entre os elementos filhos de um mesmo pai. Isso permite escolher tipos específicos de elementos, mesmo que eles não sejam os primeiros filhos de seu pai.

Sintaxe:

    
      seletor:nth-of-type(argumento) {
        propriedades: valores;
      }
    
  

Argumentos:

• Número: seleciona o elemento na posição especificada entre os elementos do mesmo tipo
• Palavras-chave: odd (ímpares) e even (pares)
• Expressão: formato an+b, onde a e b são números

Exemplo 1: Seleção de parágrafos pares

Neste exemplo, todos os parágrafos pares são estilizados com um fundo cinza-claro:

    
      /* Estilização de parágrafos pares */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Exemplo 2: Seleção de elementos em posição específica entre um tipo

Neste exemplo, o segundo cabeçalho h2 é aumentado de tamanho e colorido em laranja:

    
      /* Estilização do segundo cabeçalho h2 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Exemplo 3: Uso de expressões

Neste exemplo, cada terceiro item da lista, começando do segundo, é estilizado com um fundo cinza-claro:

    
      /* Estilização de cada terceiro item da lista, começando do segundo */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }