Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Pseudo-Classes Estruturais | Box Model and Element Spacing
CSS Fundamentals

Desafio: Pseudo-Classes EstruturaisDesafio: Pseudo-Classes Estruturais

Tarefa

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

  • Aplique a cor vermelha ao primeiro elemento usando uma pseudo-classe estrutural.
  • Aplique a cor azul ao último elemento usando uma pseudo-classe estrutural.
  • Aplique a cor verde a cada segundo elemento usando uma pseudo-classe estrutural.
html

index.html

css

index.css

js

index.js

  • :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 baseado em sua posição na lista. Por exemplo, para selecionar cada segundo item de uma lista (2, 4, 6, etc.), você pode usar :nth-child(2n).
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 3. Capítulo 6
course content

Conteúdo do Curso

CSS Fundamentals

1. Introdução ao CSS

O que é CSS?Conectando HTML e CSSSeletores para Estilizar Elementos HTMLDesafio: Adicione Seus Primeiros EstilosDesafio: Adicione os Estilos utilizando o Nome da ClasseClasses Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do UsuárioCores do TextoTrabalho Eficaz com CSSDesafio: Variáveis em CSS

2. Estilos de Texto

Estilização de TextoFormatação de TextoDesafio: Formatação de TextoAdicionar Fontes Personalizadas à Página WebPropriedades da FonteDesafio: Fontes

3. Modelo de Caixa e Espaçamento de Elementos

Modelo de CaixaDimensionamento de CaixaAdicionar Espaço aos ElementosDesafio: Box-SizingClasses Pseudoestruturais e FuncionaisDesafio: Pseudo-Classes EstruturaisTipos de ElementosTrabalhe com Elementos de Nível de BlocoTrabalhe com Elementos InlineDesafio: Prever o Layout da Página

4. Flexbox

O que é o Flexbox?Direção FlexívelAlinhar Conteúdo HorizontalmenteAlinhar Itens VerticalmentePropriedades de Item FlexívelDesafio: FlexboxDesafio: Trabalhar com Flexbox

5. Efeitos Decorativos

Cor de FundoImagem de FundoTrabalhe com ImagensElementos Pseudo-DecorativosSombrasDesafio: Efeitos DecorativosPróximos Passos

CSS Fundamentals

Desafio: Pseudo-Classes EstruturaisDesafio: Pseudo-Classes Estruturais

Tarefa

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

  • Aplique a cor vermelha ao primeiro elemento usando uma pseudo-classe estrutural.
  • Aplique a cor azul ao último elemento usando uma pseudo-classe estrutural.
  • Aplique a cor verde a cada segundo elemento usando uma pseudo-classe estrutural.
html

index.html

css

index.css

js

index.js

  • :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 baseado em sua posição na lista. Por exemplo, para selecionar cada segundo item de uma lista (2, 4, 6, etc.), você pode usar :nth-child(2n).
html

index.html

css

index.css

js

index.js

Tudo estava claro?

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