👩🏽‍💻 Intercalar formatação CSS com a pseudo-classe :nth-child

Foto de Magda Ehlers

As informações sobre a pseudoclasse :nth-child() estão no MDN e no W3Schools, mas demorei tanto para entender que decidi explicar do meu jeito aqui.

Em minha tradução livre, nth-child significa ordem do elemento filho. Entre parênteses, colocamos a posição do elemento que será afetado.

:nth-child(5) {color:blue;}

Para quem não está entendendo essa “árvore genealógica”, o elemento filho está dentro de um elemento pai. No caso de uma lista numerada, por exemplo, ol é o elemento pai, li é o elemento filho.

<ol> <!-- este é o pai --> <li>A de amor</li> <!-- este é o filho 1 --> <li>B de baixinho</li> <!-- este é o filho 2 --> <li>C de coração</li> <!-- este é o filho 3 --> <li>D de docinho</li> <!-- este é o filho 4 --> <li>E de escola</li> <!-- este é o filho 5 --> <li>F de feijão</li> <!-- este é o filho 6 --> </ol> <!-- o pai termina aqui --> <li>G de gente</li> <!-- este é filho de outro pai -->

Esse foi só um exemplo em que todos os filhos são do mesmo tipo. O elemento pai pode ser qualquer elemento que tenha outros dentro dele, inclusive o próprio body, que tem filhos de tipos diversos como div, img, p…

Neste tutorial, vou focar em filhos do mesmo tipo para falar de três formas de definir a ordem dos “irmãos”:

• Par (even) ou ímpar (odd)
• Ordem numérica (n)
• Matemática (2n + 1)

E tudo que você entender sobre :nth-child() poderá ser aplicado a :nth-of-type() também.

🔢 Par (even) ou ímpar (odd)

Odd indica que a ordem do filho é ímpar e even indica que a ordem é par. Por isso, conseguimos alternar as cores usando essa pseudo-classe.

É mais fácil entender na prática do que na teoria. Vou começar com o exemplo clássico que é alterar as cores das colunas de uma tabela.

td:nth-child(odd) {background:#fde;} td:nth-child(even) {background:#ffc;}

Estados:	Maranhão	Mato Grosso	Mato Grosso do Sul	Minas Gerais
Siglas:	MA	MT	MS	MG
Capitais:	São Luís	Cuiabá	Campo Grande	Belo Horizonte
Sigla do principal aeroporto:	SLZ	CGB	CGR	CNF

E agora, alterando as cores das linhas:

tr:nth-child(odd) {background:#fde;} tr:nth-child(even) {background:#ffc;}

Estados:	Maranhão	Mato Grosso	Mato Grosso do Sul	Minas Gerais
Siglas:	MA	MT	MS	MG
Capitais:	São Luís	Cuiabá	Campo Grande	Belo Horizonte
Sigla do principal aeroporto:	SLZ	CGB	CGR	CNF

E dá para intercalar linhas e colunas ao mesmo tempo, gerando um xadrez:

tr:nth-child(odd) td:nth-child(odd) {background:#fde;} tr:nth-child(odd) td:nth-child(even) {background:#ffc;} tr:nth-child(even) td:nth-child(odd) {background:#ffc;} tr:nth-child(even) td:nth-child(even) {background:#fde;}

Estados:	Maranhão	Mato Grosso	Mato Grosso do Sul	Minas Gerais
Siglas:	MA	MT	MS	MG
Capitais:	São Luís	Cuiabá	Campo Grande	Belo Horizonte
Sigla do principal aeroporto:	SLZ	CGB	CGR	CNF

Você pode experimentar os exemplos acima nesta página do CodePen:

See the Pen Untitled by Helen Fernanda (@helenfernanda) on CodePen.

🔢 Ordem numérica (n)

Você também pode definir a formatação CSS de um elemento numa posição específica:

li:nth-child(2) {background:#ffc; font-weight:bold;} li:nth-child(4) {background:#000; color:#ff0; text-decoration:underline;}

• A de açaí
• B de banana
• C de cacau
• D de damasco

Se você definir no CSS um número que não corresponde à ordem de um elemento, nada acontece.

🔢 Matemática (2n + 1)

Isso aqui foi o que eu mais demorei para entender, então já aviso para não se desesperar se não compreender na primeira tentativa.

Se você quiser alternar entre apenas duas formatações, sem dúvida é mais fácil usar par (even) ou ímpar (even), mas se você deseja alternar três ou mais formatações diferentes, vai precisar fazer algumas contas.

No próximo exemplo, vou fazer uma lista com três formatações diferentes usando as seguintes fórmulas:

(3n)

elementos na posição de múltiplos de três (três vezes n): 3º (três vezes um), 6º (três vezes dois), 9º (três vezes três), 12º, 15º…

(3n - 1)

elemento uma (1) posição anterior ao múltiplo de três: 2º (três vezes um menos um), 5º (três vezes dois menos um), 8º (três vezes três menos um), 11º, 14º…

(3n - 2)

elemento duas (2) posições anteriores ao múltiplo de três: 1º (três vezes um menos dois), 4º (três vezes dois menos dois), 7º (três vezes três menos dois), 10º, 13º…

Mas eu também poderia somar ao invés de subtrair:

(3n + 1)

elemento uma (1) posição posterior ao múltiplo de três: 1º (três vezes zero mais um), 4º (três vezes um mais um), 7º (três vezes dois mais um), 10º, 13º…

(3n + 2)

elemento duas (2) posições posteriores ao múltiplo de três: 2º (três vezes zero mais dois), 5º (três vezes um mais dois), 8º (três vezes dois mais dois), 11º, 14º…

O valor de n sempre começa em ZERO. Mas quando fazemos a SUBTRAÇÃO, os primeiros resultados são negativos, logo não correspondem a nenhum item.

Agora vamos ao CSS. Já vou colocar na ordem do primeiro filho ao terceiro:

li:nth-child(3n - 2) {background-color:yellow;} /* primeira formatação */ li:nth-child(3n - 1) {background-color:cyan;} /* segunda formatação */ li:nth-child(3n) {background-color:lime;} /* terceira formatação */

• A de arara
• B de bacurau
• C de colibri
• D de dodô
• E de ema
• F de falcão

Somando, o CSS seria:

li:nth-child(3n + 1) {background-color:yellow;} /* primeira formatação */ li:nth-child(3n + 2) {background-color:cyan;} /* segunda formatação */ li:nth-child(3n) {background-color:lime;} /* terceira formatação */

Misturando soma e substração, fica assim:

li:nth-child(3n + 1) {background-color:yellow;} /* primeira formatação */ li:nth-child(3n - 1) {background-color:cyan;} /* segunda formatação */ li:nth-child(3n) {background-color:lime;} /* terceira formatação */

Se precisar de uma sequência diferente, as fórmulas continuarão no mesmo formato:

• (4n + 0): conta de quatro em quatro
• (5n + 0): conta de cinco em cinco
• (6n + 0): conta de seis em seis
• (7n + 0): conta de sete em sete

🔢 Diferença de :nth-of-type()

Se você entendeu a regra do :nth-child(), consegue aplicar o mesmo na pseudoclasse :nth-of-type(), cuja diferença se refere à forma de contar os “filhos”, já que vai considerar apenas os do mesmo tipo.

Como nos exemplos acima usei apenas “irmãos gêmeos”, a contagem seria a mesma, tanto com :nth-child como com :nth-of-type.

Mas, agora, veja como seria a contagem dos filhos de um elemento mais diversificado:

<div> <!-- este é o elemento pai do nosso exemplo --> <h1>…</h1> <!-- 1º nth-child; 1º nth-of-type h1 --> <p>…</p> <!-- 2º nth-child; 1º nth-of-type p --> <p>…</p> <!-- 3º nth-child; 2º nth-of-type p --> <img src='imagem.png'/> <!-- 4º nth-child; 1º nth-of-type img --> <h2>…</h2> <!-- 5º nth-child; 1º nth-of-type h2 --> <p>….</p> <!-- 6º nth-child; 3º nth-of-type p --> <img src='imagem.png'/> <!-- 7º nth-child; 2º nth-of-type img --> <p>….</p> <!-- 8º nth-child; 4º nth-of-type p --> </div> <!-- fim do pai do nosso exemplo -->

Quando o pai tem elementos diversos assim, é possível que você queira escolher pela ordem geral dos filhos, mas é muito mais provável que queira selecionar pelo tipo. Continue lendo sobre :nth-of-type no MDN e no W3Schools.

Até mais!