Seletor CSS nth-child: odd, even e fórmulas com exemplos

Hoje voltamos às bases do CSS. Costumo usar os seletores CSS nth-child nos meus artigos.

E isso fez-me perceber que nunca tinha revisto mesmo as bases dos seletores css nth-child. nth-child é uma pseudo-classe CSS que permite selecionar elementos.

Hoje vamos explorar as possibilidades deste poderoso seletor CSS com alguns exemplos.

Comecemos por alguns seletores css nth-child básicos:

Podemos indicar o número do elemento que queremos selecionar. Digamos que queremos o terceiro elemento da lista.

.article-list li:nth-child(3) {
    	color: green;
}

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

O resultado é que só o terceiro elemento fica verde

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

O seletor odd/even

Podemos selecionar todos os elementos de posição par ou ímpar com odd e even.

.article-list-odd li:nth-child(odd) {
    	color: green;
}

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

O resultado é que só os elementos ímpares ficam selecionados:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

e nth-child(even) para os resultados pares:

.article-list-even li:nth-child(even) {
    	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Todos os X elementos

Outra coisa que dá para fazer com o seletor nth-child, é selecionar de x em x elementos. Digamos, por exemplo, que queremos selecionar um elemento em cada quatro:

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

Agora fica selecionado cada 4.º elemento filho:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

... li:nth-child(4n+1) {
	color: red;
}

E se quisermos incluir o primeiro elemento:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

Ou o segundo elemento:

... li:nth-child(4n+2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Selecionar os x primeiros elementos

Podemos até usar um seletor que apanha todas as tags menos os três primeiros elementos.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Selecionar todos os elementos menos os x primeiros

Podemos até usar um seletor que apanha todas as tags menos os três primeiros elementos.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Selecionar o primeiro ou o último elemento

Também podemos selecionar o primeiro ou o último elemento com :first-child e :last-child

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Com isto, podemos também aplicar um desvio para apanhar o penúltimo elemento da lista.

li:nth-last-child(2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Combinar seletores

Também podemos combinar seletores nth-child!

Digamos que queres apanhar todos os elementos pares dentro das listas de posição ímpar.

ul:nth-child(odd) li:nth-child(even) {
	color: red;
}

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Conclusão

Espero que este artigo te ajude na integração dos teus sites com a pseudo-classe nth-child. Se quiseres ver que outras pseudo-classes css existem, podes consultar os artigos seguintes:

• pseudo-classe CSS :not
• pseudo-classe CSS :where
• pseudo-classe CSS :empty