Aprenda Usando Pseudo-Classes Estruturais e Funcionais | O Modelo de Caixa do CSS e Espaçamento de Elementos

Pseudo-classes permitem direcionar elementos com precisão com base em sua ordem dentro de um contêiner. Vamos explorar algumas das mais utilizadas.

:first-child

A pseudo-classe :first-child seleciona um elemento que é o primeiro filho de seu elemento pai, independentemente da tag ou nome de classe. Considere o exemplo a seguir para esclarecer. Temos um conjunto de elementos e, apenas para o primeiro elemento (o primeiro elemento <li>), queremos definir sua propriedade color como blue.

index.html

styles.css

Saída

Apenas o primeiro item de FAQ foi selecionado, e estilos específicos foram aplicados.

:last-child

A pseudo-classe :last-child seleciona o último filho de seu elemento pai, permitindo modificar qualquer uma de suas propriedades. Considere um exemplo para ilustrar como utilizar essa pseudo-classe de forma eficaz.

index.html

styles.css

Saída

:nth-child

A pseudo-classe :nth-child permite selecionar elementos com base em sua posição dentro de uma lista de irmãos. É possível iniciar com uma seleção simples especificando um número. Por exemplo:

index.html

styles.css

Saída

Os estilos de destaque foram aplicados apenas aos elementos selecionados (2º e 3º).

Avançado :nth-child

Para cenários mais complexos, é possível utilizar a fórmula an+b para selecionar múltiplos elementos com base em sua posição. Veja como a fórmula funciona:

a determina o padrão de repetição (por exemplo, a cada 2º, 3º filho, etc.);
b define o ponto de início ou deslocamento para a seleção;
n atua como o contador que incrementa a cada iteração, começando em 0.

Veja alguns seletores típicos.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Observação

Não é necessário memorizar todos os seletores. Sempre é possível pesquisar no Google.

:not()

A pseudo-classe :not() seleciona elementos que não correspondem a um seletor especificado. Por exemplo, :not(p) seleciona todos os elementos exceto os elementos <p>. Veja alguns exemplos:

index.html

index.css

1. Qual pseudo-classe pode ser usada para selecionar o primeiro elemento em um conjunto de elementos?

2. Para que serve a pseudo-classe `nth-child`?

3. Como funciona a pseudo-classe `last-child`?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 5

Pergunte à IA

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

Suggested prompts:

Can you explain how the :not() pseudo-class works with multiple selectors?

Could you provide more examples of using :not() in CSS?

What are some common use cases for the :not() pseudo-class?

Awesome!

Completion rate improved to 2.56

Deslize para mostrar o menu

Pseudo-classes permitem direcionar elementos com precisão com base em sua ordem dentro de um contêiner. Vamos explorar algumas das mais utilizadas.

:first-child

index.html

styles.css

Saída

Apenas o primeiro item de FAQ foi selecionado, e estilos específicos foram aplicados.

:last-child

index.html

styles.css

Saída

:nth-child

index.html

styles.css

Saída

Os estilos de destaque foram aplicados apenas aos elementos selecionados (2º e 3º).

Avançado :nth-child

Para cenários mais complexos, é possível utilizar a fórmula an+b para selecionar múltiplos elementos com base em sua posição. Veja como a fórmula funciona:

a determina o padrão de repetição (por exemplo, a cada 2º, 3º filho, etc.);
b define o ponto de início ou deslocamento para a seleção;
n atua como o contador que incrementa a cada iteração, começando em 0.

Veja alguns seletores típicos.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Observação

Não é necessário memorizar todos os seletores. Sempre é possível pesquisar no Google.

:not()

A pseudo-classe :not() seleciona elementos que não correspondem a um seletor especificado. Por exemplo, :not(p) seleciona todos os elementos exceto os elementos <p>. Veja alguns exemplos:

index.html

index.css

1. Qual pseudo-classe pode ser usada para selecionar o primeiro elemento em um conjunto de elementos?

2. Para que serve a pseudo-classe `nth-child`?

3. Como funciona a pseudo-classe `last-child`?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 5

Usando Pseudo-Classes Estruturais e Funcionais

:first-child

Saída

:last-child

Saída

:nth-child

Saída

Avançado :nth-child

:not()

1. Qual pseudo-classe pode ser usada para selecionar o primeiro elemento em um conjunto de elementos?

2. Para que serve a pseudo-classe nth-child?

3. Como funciona a pseudo-classe last-child?

Awesome!

Usando Pseudo-Classes Estruturais e Funcionais

:first-child

Saída

:last-child

Saída

:nth-child

Saída

Avançado :nth-child

:not()

1. Qual pseudo-classe pode ser usada para selecionar o primeiro elemento em um conjunto de elementos?

2. Para que serve a pseudo-classe nth-child?

3. Como funciona a pseudo-classe last-child?

2. Para que serve a pseudo-classe `nth-child`?

3. Como funciona a pseudo-classe `last-child`?

2. Para que serve a pseudo-classe `nth-child`?

3. Como funciona a pseudo-classe `last-child`?