Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child

Olá, Web Developers!

Quando estamos trabalhando com CSS, pode haver momentos em que a gente irá precisar selecionar um ou mais elementos em um grupo de elementos.

Pode ser que você queira selecionar todos os elementos pares, um elemento a cada três ou todos após o quarto elemento.

Para isso podemos usar a pseudo-classe :nth-child.

Curso XP - Extreme Programming

Conhecer o curso

Como base utilizaremos o seguinte HTML e CSS:

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul{
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li{
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
}

E teremos o seguinte resultado:

Agora utilizaremos o nth-child para selecionar os <li>.

Selecionar apenas o nº elemento

Para selecionar um elemento em um grupo, basta passarmos para o nth-child a posição desse elemento.

Exemplo: selecionar 5º elemento.

li:nth-child(5) {
    background-color: red;
}

Selecionar todos após o nº elemento

Para selecionar todos após um determinado elemento, basta passar n + e o número do elemento a partir do qual você quer selecionar.

Exemplo: selecionar todos a partir do 5º elemento (inclusive).

li:nth-child(n + 5) {
    background-color: red;
}

Selecionar os primeiros n elementos

Para selecionar os primeiros n elementos, basta fazer igual ao exemplo anterior, mas deixamos o n negativo.

Exemplo: selecionar os primeiros 5 elementos.

li:nth-child(-n + 5) {
    background-color: red;
}

Selecionar um a cada n elementos a partir do primeiro

Para selecionar um a cada n elementos, basta multiplicar este número a n.

Exemplo: selecionar um elemento a cada 3.

li:nth-child(3n + 1) {
    background-color: red;
}

A explicação dessa seleção é imaginar que o n assume vários valores, e como estamos multiplicando por 3 e somando com 1, teremos:

**(3n) + 1**
(3 x 0) + 1 = 1 (seleciona o 1º elemento)
(3 x 1) + 1 = 4 (seleciona o 4º elemento)
(3 x 2) + 1 = 7 (seleciona o 7º elemento)
(3 x 3) + 1 = 10 (seleciona o 10º elemento)

Para selecionar a cada 2 elementos começando do primeiro, você pode indicar que quer selecionar os números ímpares. Então os seguintes códigos terão o mesmo resultado:

li:nth-child(2n + 1) {
    background-color: red;
}

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

Selecionar um a cada n elementos (ignorando o primeiro)

Mesmo que o anterior, mas não selecionaremos o primeiro elemento.

Exemplo: selecionar um elemento a cada 3.

li:nth-child(3n) {
    background-color: red;
}

Para selecionar a cada 2 elementos sem contar o primeiro, você pode indicar que quer selecionar os números pares. Então os seguintes códigos terão o mesmo resultado:

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

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

Selecionar um a cada n elementos a partir do nº elemento

Mesmo que o anterior, mas indicamos quantos elementos queremos pular.

Exemplo: selecionar um elemento a cada 3 a partir do 3º elemento.

li:nth-child(3n + 3) {
    background-color: red;
}

Contando a partir do último elemento

Além do nth-child também temos o nth-last-child, que podemos usar do mesmo modo como fizemos anteriormente. A diferença é que ele começa no último elemento.

Para selecionar os últimos n elementos, basta fazer igual ao exemplo de selecionar os n primeiros elementos, mas usando o nth-last-child agora.

Exemplo: selecionar os últimos 5 elementos.

li:nth-last-child(-n + 5) {
    background-color: red;
}

Curso Laravel - Eloquent ORM

Conhecer o curso