Como funciona o seletor :nth-something()

element:nth-child(3n+3)

Muita gente, assim como eu, um dia se perguntou — O que é esse “n” ai no meio?

element:nth-child(3n+3)

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)

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

Para entender, basta pensar que o n é o número 0 que vai incrementando de um em um por cada inteiro positivo (1, 2, 3, 4). Para completar a expressão, multiplique o número ao lado do n por n, (3xn) + 3. Veja o exemplo abaixo que fica muito mais fácil de entender.

:nth-child(3n+3)
  • (3 x 0) + 3 = 3 (3º elemento)
  • (3 x 1) + 3 = 6 (6º elemento)
  • (3 x 2) + 3 = 9 (9º elemento)

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

:nth-child(4n-1)
  • (4 x 0) — 1 = -1 (nenhum elemento)
  • (4 x 1) — 1 = 3 (3º elemento)
  • (4 x 2) — 1 = 7 (7º elemento)

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

:nth-child(-n+3)
  • -0 + 3 = 3 (3º elemento)
  • -1 + 3 = 2 (2º elemento)
  • -2 + 3 = 1 (1º elemento)
  • -3 + 3 = 0 (nenhum elemento)

Fonte: Sitepoint

Originally published at blog.filipelinhares.com.

--

--

--

Empathy is important.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
● filipe

● filipe

Empathy is important.

More from Medium

Web Professionals’ Top 13 Open-Source Software Apps

How to add a Global Navigation Bar to Your Site the Easy Way.

The Joys of Tailwind CSS

InternTheory Project