0

Dentro do body do meu documento HTML tenho uma sequência de 5 sections, esse número pode variar dependendo da situação.

Gostaria de definir um destaque (background) diferente para cada section "par", ou seja, pular 1 section e aplicar um background-color, pular outra e aplicar novamente o mesmo estilo, sucessivas vezes até a ultima section da página.

2 Respostas 2

2

Existem seletores especificos para apanhar os elementos pares e impares, que permitem fazer o que quer com facilidade.

Pode começar por formatar todos os elementos normalmente e sobrepõe a formatação para os pares com o seletor:

section:nth-child(even)

Ou para os impares com:

section:nth-child(odd)

Exemplo:

section {
  background-color:lightBlue;
  height:80px;
}

section:nth-child(even){ /*pares com fundo azul*/
  background-color:blue;
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

Documentação para o nth-child no MDN

0
2

Usando :nth-child(even) ou :nth-of-type(even), você pode facilmente obter o resultado desejado. Ele vai selecionar todos que foram "even", ou seja, todos os pares.

Observe esse exemplo em http://cssdeck.com/labs/rib8dumb:

/* Propósito Estético */
section {
  color: white;
  padding: 2em 1.5em;
}

/* Pares */
section:nth-child(even) {
  background-color: #333;
  color: #ccc;
}

/* Impares */
section:nth-child(odd) {
  background-color: #ccc;
  color: #333
}
<section>Section #1</section>
<section>Section #2</section>
<section>Section #3</section>
<section>Section #4</section>
<section>Section #5</section>

Lembrando que existem mil e uma maneiras de usar essas pseudo-classes. Esse site lista quase todas as maneiras que você pode usar: http://nthmaster.com

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .