Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio: Praticar Pseudo-Classes Estruturais | O Modelo de Caixa do CSS e Espaçamento de Elementos
Fundamentos de CSS

bookDesafio: Praticar Pseudo-Classes Estruturais

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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

Suggested prompts:

Can you show me an example of how to use these pseudo-classes in CSS?

What kind of elements are we applying these styles to?

Can you explain how :nth-child(2n) works in more detail?

Awesome!

Completion rate improved to 2.56

bookDesafio: Praticar Pseudo-Classes Estruturais

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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6
some-alt