Quem tem medo do nth-child?

Digamos que voc precisa dar manuteno em um cdigo na empresa em que voc trabalha, e se depara com isso daqui no CSS:

li:nth-child(n + 2):nth-child(-n + 9):nth-child(4n + 2)

Talvez a sua primeira reao seja essa daqui:

Palma, palma, no priemos cnico! Pega um caf e vamos destrinchar passo a passo de como esse megazord funciona. Depois de ler esse artigo voc vai entender e apreciar essa ferramenta poderosa que a pseudo-classe :nth-child(). Ficou na dvida do que uma pseudo-classe? D uma olhada no artigo da @sucodelarangela que est l nas referncias. Mas, em linhas gerais, s lembrar da partcula pseudo que a gente viu na escola (pseudocincias, pseudofrutos), que significava aquilo que parece ser, mas no . As pseudo-classes so seletores do CSS que ajudam a mirar em certos elementos sem necessidade de criar uma classe especfica para eles.

Vamos estudar alguns casos?

1 Usando :nth-child() com um nmero absoluto

Aqui a coisa bem intuitiva: voc seleciona o elemento que o ensimo filho dentro de outro.

Ensimo????

T, talvez fique mais fcil com exemplos, n? o seguinte: se voc colocar :nth-child(1), vai selecionar o primeiro elemento, :nth-child(2), o segundo, e assim por diante.

No exemplo abaixo eu usei o seletor

.filho:nth-child(3)

para pintar o terceiro quadrado de verde.

O que est acontecendo aqui: estamos selecionando o elemento com classe "filho" que tambm seja o terceiro filho de outro elemento. E isso muito importante, como vamos ver a seguir.

Um erro muito comum pensar Eu quero o terceiro elemento com a classe filho e usar o nth-child. Veja o exemplo abaixo:

No primeiro cenrio, estamos tentando mirar no elemento com classe filho que seja o terceiro filho de algum elemento. Acontece que nesse caso, o terceiro filho uma tag p sem a classe filho. Ento o CSS no encontra ningum para pintar de verde.

No segundo cenrio, corrigimos usando nth-child(4), mas a correo vai depender de qual o nosso objetivo (poderia ser aplicar .pai > :nth-child(3), ou mesmo :nth-of-type(3), atingindo resultados diferentes).

A voc que leu at aqui pensa Que moleza! J entendi, nem vou ler o resto e corre pro seu projeto querendo estilizar aquela lista de links. Com a segurana de quem sabe que CSS se aprende em 30 minutos, voc digita:

.lista__item__link:nth-child(3){ color: red;  }

Ao ver que no funcionou, com lgrimas nos olhos, voc corre para o twitter e lana a hashtag #ocaiomentiupramim.

Mas calma l. Vamos entender o que aconteceu aqui hipottica pessoa apressada.

Sua lista de links tem mais ou menos essa cara aqui:

O que acontece que voc estava dizendo pro CSS: Corre l, e busca o 'lista__item__link' que seja o terceiro filho de algum. O CSS foi e s encontrou lista__item__link que era o primeiro filho do lista__item. Ele ficou bem confuso, e com um balde de tinta vermelha inutilizado.

Agora voc j entendeu e j sabe como consertar: s mirar no terceiro lista__item, e depois selecionar o filho dele.

.lista__item:nth-child(3) > .lista__item__link{  color: red;  }

At agora os exemplos que vimos no parecem to teis. Como estamos mirando em apenas um elemento, todas as vezes seria possvel utilizar classes sem prejuzo da manutenibilidade do cdigo. E se precisssemos aplicar uma ao nos elementos mltiplos de 3? Voc precisaria aplicar vrias vezes aquela classe no HTML. Daria para usar nth-child(3), nth-child-(6), nth-child-(9), nth-child(12), mas e se voc no soubesse de antemo quantos elementos vo estar naquela lista?

a que o nth-child comea a brilhar.

2 Usando mltiplos

Quando usamos o n do nth-child, como se substitussemos esse n por cada posio dos elementos filhos. Uma ul que tenha 6 lis, e na qual colocssemos o seletor li:nth-child(2n) faria por trs dos panos algo assim:

li:nth-child(2 * 1), logo li:nth-child(2);
li:nth-child(2 * 2), logo li:nth-child(4);
li:nth-child(2 * 3) , logo li:nth-child(6);
...
li:nth-child(2 * 6) , logo li:nth-child(12);

Ento ele iria selecionar o 2, 4 e 6 elementos.

Digamos que a gente precise pintar todo o terceiro quadrado de uma lista de 20 quadrados de verde. Agora a gente j consegue fazer isso bem fcil:

Agora, e se a gente precisasse fazer isso, s que comeando do primeiro? No caso, pintar o primeiro e depois ir pulando de trs em trs (4, 7, etc)?

3 Adicionando deslocamento

Bem , ns j sabemos fazer a seleo do 3, 6, 9... certo?

Agora compare essas duas selees:

0, 3, 6, 9...
1, 4, 7, 10...

A diferena entre elas que na segunda, em vez de comearmos do zero, comeamos do nmero 1

Para fazermos isso com nth-child basta a gente somar o deslocamento que a gente quer ao mltiplo de 'n'. Nesse caso, nth-child(3n + 1).

Na dvida, substitua o n pelo nmero de elementos, em sequncia, comeando do zero.

nth-child(3n + 1) =>
nth-child(3 * 0 + 1), logo nth-child(1);
nth-child(3 * 1 + 1), logo nth-child(4);
nth-child(3 * 2 + 1), logo nth-child(7);
...
nth-child(3 * 20 + 1), logo nth-child(61);

Isso tambm pode ser usado para mirar em todos os elementos menos alguns do incio. Digamos que a gente quer pintar todos os quadrados de verde, menos os trs primeiros.

Se usssemos nth-child(n) estaramos dizendo para selecionar todos os elementos. Se somssemos 1, o resultado seria... o mesmo!

Aqui temos que entender o pulo do gato do nth-child: a contagem dele comea do 0. Ento, quando somamos 1, no vamos ver diferena no resultado. Temos sempre que pensar um nmero frente para compensar esse primeiro n-fantasma.

s fazer aquela substituio marota:
nth-child(n + 1) =>
nth-child(0 + 1), logo nth-child(1);
nth-child(1 + 1), logo nth-child(2);
nth-child(2 + 1), logo nth-child(3);
...
nth-child(20 + 1), logo nth-child(21);

Com isso, podemos concluir que para pular os trs primeiros elementos, temos que somar 4, usando nth-child(n + 4). Podemos ainda pensar da seguinte forma: usando nth-child(n + 4) estamos selecionando do 4 elemento em diante,

Um outro pulo do gato do nth-child: a contagem do 'n' na verdade no para na quantidade de elementos da lista. Por isso um seletor como nth-child(n - 5), que poderia servir para selecionar todos os itens, menos os cinco ltimos no funciona. Esse seletor vai selecionar TODOS os elementos. Mas a gente consegue contornar isso.

4 Olhando s para os primeiros

No tpico anterior, aprendemos a olhar para todos menos para os primeiros com a notao nth-child(n + X). Podemos fazer o inverso disso, e mirar somente nos primeiros X elementos e no no resto.
Para isso, usamos -n. No se assuste, to fcil quanto os outros!

Quando declaramos nth-child(-n), no vamos ver nada acontecendo. Isso porque por trs dos panos o CSS vai fazer numa lista, por exemplo, de 6 itens:

nth-child(-n) =>
nth-child(-1 * 0), logo nth-child(0);
nth-child(-1 * 1), logo nth-child(-1);
nth-child(-1 * 2), logo nth-child(-1);
...
nth-child(-1 * 6), logo nth-child(-6);
...

Como no temos elementos negativo no nth-child, nenhum ser selecionado.

Mas se somarmos ao -n uma quantidade X, podemos selecionar quantos elementos do incio da lista ns quisermos!

nth-child(-n + 3) =>
nth-child(-1 * 0 + 3), logo nth-child(3);
nth-child(-1 * 1 + 3), logo nth-child(2);
nth-child(-1 * 2 + 3), logo nth-child(1);
...
nth-child(-1 * 6 + 3), logo nth-child(-3);
...

Note que nesse caso ns vamos selecionar os trs primeiros elementos. Logo, podemos pensar que o seletor nth-child(-n + 3) est dizendo selecionar todos, mas s at o terceiro elemento.

Veja ainda o exemplo abaixo:

5 Montando nosso Megazord

Agora estamos prontos para montar o nosso nth-child monstro!

Digamos que a gente queira selecionar a partir do stimo quadrado, e parar no dcimo-quinto.

Para fazer isso a gente pode encadear seletores nth-child!

.container__square:nth-child(n + 7):nth-child(-n + 15){  background-color: green;}

Assim, estamos falando pro CSS: Vai l, e pinta de verde todos os quadrados a partir do stimo, mas no v alm do dcimo quinto.

E se agora ns quisssemos fazer a mesma coisa, mas pulando um?

.container__square:nth-child(n + 7):nth-child(-n + 15):nth-child(2n + 1){  background-color: green;}

Conseguimos!

Aquele emaranhado que parecia indecifrvel agora parece bem mais simptico, no ?

Utilizando nth-child nos seus projetos voc consegue criar seletores complexos sem poluir seu cdigo com classes muito especficas, que tornariam difcil a insero de novos elementos em uma lista, por exemplo.

Parabns por ter mais uma ferramenta no seu cinto de utilidades.

Referncias:

:nth-child
https://css-tricks.com/almanac/selectors/n/nth-child/

:nth-child()
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

How does CSS nth-child() really work?
https://www.youtube.com/watch?v=KIIktcWu6hc&ab_channel=WesBos

Entendendo CSS: Pseudo-Classes e Pseudo-Elementos
https://dev.to/sucodelarangela/entendendo-css-pseudo-classes-e-pseudo-elementos-b83