Como funciona o nth-child()

element:nth-child(3n+3) {
  // some style here
}

Muita gente, assim como eu, um dia se perguntou - O que é esse “n” ai no meio? – É isso que eu vou explicar hoje.

O que o código acima faz, é selecionar cada terceiro elemento, ou seja, o 3º, 6º, 9º.

 Mas o que acontece entre os parênteses?

O seletor nth-child() aceita duas palavras-chaves, “odd” (impar) e “even” (par). Como o nome já diz, odd seleciona cada número impar e o even cada número par.

Como visto no primeiro exemplo, nth-child() também aceita expressões. A expressão mais simples que podemos utilizar é utilizar apenas um número, isso ira selecionar apenas o elemento que corresponder aquele número.

element:nth-child(5) {
  // some style here
} 

Mas agora vamos voltar para o exemplo do começo, a expressão 3n+3, que seleciona cada terceiro elemento.

Para entender, você tem que pensar no n como o número 0 que ira iterando por cada inteiro positivo (1, 2, 3, 4). Para completar a expressão, multiplique o primeiro número por n (3xn) + 3. Agora vamos substituir o n pelo 0 e os outros inteiros.

Você também pode usar o operador de subtração:

:nth-child(4n-1)

Usar -n fica meio estranho mas também é possível:

:nth-child(-n+3)

Fonte: http://www.sitepoint.com/web-foundations/understanding-nth-child-pseudo-class-expressions/

 
5
Kudos
 
5
Kudos

Now read this

Como utilizar fetch();

Fetch, permite fazer request similiar a forma como era feito antigamente com o XMLHttpRequest. A principal diferença é que o fetch utiliza promisses, o que gera uma API limpa e simples, sem callback hell. Request básico O fetch, recebe... Continue →