Aprenda Desafio: Praticar Pseudo-Classes Estruturais | O Modelo de Caixa do CSS e Espaçamento de Elementos

Tarefa

Estamos trabalhando com um conjunto de elementos, e o objetivo é praticar a aplicação de diferentes cores utilizando pseudo-classes estruturais. Sua tarefa é a seguinte:

Aplicar a cor red ao primeiro elemento utilizando uma pseudo-classe estrutural.
Aplicar a cor blue ao último elemento utilizando uma pseudo-classe estrutural.
Aplicar a cor green a cada segundo elemento utilizando uma pseudo-classe estrutural.

index.html

index.css

:first-child: Seleciona o primeiro filho de um elemento pai.
:last-child: Seleciona o último filho de um elemento pai.
:nth-child(): Seleciona um filho específico de um elemento pai com base em sua posição na lista. Por exemplo, para selecionar cada segundo item da lista (2, 4, 6, etc.), pode-se usar :nth-child(2n).

index.html

index.css

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6

Pergunte à IA

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

Awesome!

Completion rate improved to 2.56

Deslize para mostrar o menu

Tarefa

Estamos trabalhando com um conjunto de elementos, e o objetivo é praticar a aplicação de diferentes cores utilizando pseudo-classes estruturais. Sua tarefa é a seguinte:

Aplicar a cor red ao primeiro elemento utilizando uma pseudo-classe estrutural.
Aplicar a cor blue ao último elemento utilizando uma pseudo-classe estrutural.
Aplicar a cor green a cada segundo elemento utilizando uma pseudo-classe estrutural.

index.html

index.css

:first-child: Seleciona o primeiro filho de um elemento pai.
:last-child: Seleciona o último filho de um elemento pai.
:nth-child(): Seleciona um filho específico de um elemento pai com base em sua posição na lista. Por exemplo, para selecionar cada segundo item da lista (2, 4, 6, etc.), pode-se usar :nth-child(2n).

index.html

index.css

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6