Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

3 em 3

Há possibilidade de pintar 3 linhas sim e 3 linhas não com nth-child?

3 respostas

Oi Flavio, tudo bom?

Dá sim! Além dos valores ali de par e ímpar, podemos usar o N (enésimo), algo assim:

li:nth-child(3n) {
  color: red;
}

O N ali dentro começa em 0, e vai sendo acrescido de 1 enquanto tiverem elementos, no caso acima de LIs.

3n = 3 . 0 = 0

3n = 3 . 1 = 3

3n = 3 . 2 = 6

E assím vai!

Abcs!

Dessa forma ele só pinta a cada terceiro, ou seja, o primeiro e o segundo não pinta, o terceiro pinta, na verdade quero pintar 3 corridos e 3 sem pintar seguidos.

solução!

Oi Flavio,

Pedi ajuda para outro instrutor aqui (pensei em soluções tentando envolver o :not mas sem sucesso).

O ponto é que com uma regra só fica impossível bem difícil fazer isso, então ele resolveu da seguinte maneira:

li:nth-child(6n + 1),
li:nth-child(6n + 2),
li:nth-child(6n + 3){
    color: red;
}

Abcs!