CSS3 – Usando o seletor nth-child

Usando o seletor nth-child ( )

O seletor nth-child( ) é usado para marcar determinado local ou linha, possibilitando aplicar vários estilos no local escolhido. Este seletor costuma ser usando em tabela, lista, parágrafo, spam e outros.

Dentro do ( ) vão estar as instruções podendo ser em nome ou número possibilitando fazer diversas combinações para atender sua necessidade. 

Exemplo de seletores

• nth-child(odd): Representa as linhas impares “modo simples e não permite maiores alterações”.
• nth-child(even): Representa as linhas Pares “modo simples e não permite maiores alterações”.
• nth-child(3): Representa o número da linha que deseja aplicar o estilo e sem repetição.
• nth-child(2n): Representa as linha que deseja aplicar o estilo, neste caso existe repetição,
• nth-child(2n+1): Representa a linhas impares, o 2n é a sequência de um sim e um não e o +1 representa a linha que vai iniciar.
• nth-child(0n+4): Representa que não foi escolhida um sequencia 0n, portanto somente a linha +4 vai receber o estilo.
• nth-child(-n+5): Representa que não tem uma sequência e todas a linhas até o 5 vão receber o estilo.

Exemplo 1 aplicando em uma Tabela.

HTML.

Antes de iniciar é necessário uma tabela para que o estilo CSS seja aplicado

<table>

<tr>

<th>Nome</th>

<th>Idade</th>

<th>Sexo</th>

</tr>

<tr>

<td>Peter</td>

<td>33</td>

<td>Masculino</td>

</tr>

<tr>

<td>Sara</td>

<td>23</td>

<td>Feminino</td>

</tr>

<tr>

<td>Joe</td>

<td>63</td>

<td>Masculino</td>

</tr>

<tr>

<td>Cleveland</td>

<td>13</td>

<td>Masculino</td>

</tr>

</table>

CSS.
Neste caso somente usamos o nth-child(even) para pintar de cinza claro nas linhas pares, e o restante do CSS é o estilo da tabela.

<!-- Estilo nas linhas Pares -->
  tr:nth-child(even){background-color: #f2f2f2 }

<!-- Formatando a tabela -->
  table {border-collapse: collapse;  width: 100%;  border: 1px solid #000;}
  th, td {text-align: left;  padding: 8px; }

<!-- Estilo somente na primeira linha da tabela -->
  th { background-color: #ff9800; color: white;}

Resultado.

Nome	Idade	Sexo
Peter	33	Masculino
Sara	23	Feminino
Joe	63	Masculino
Cleveland	13	Masculino

Exemplo 2 aplicando em Parágrafo.

HTML.

<article>
<p>Parágrafo 1 de exemplo...</p>
<p>Parágrafo 2 de exemplo...</p>
<p>Parágrafo 3 de exemplo...</p>
<p>Parágrafo 4 de exemplo...</p>
<p>Parágrafo 5 de exemplo...</p>
<p>Parágrafo 6 de exemplo...</p>
<p>Parágrafo 7 de exemplo...</p>
</article>

CSS.
Aqui a primeira linha recebe um estilo de cor verde, e as outras linhas recebem estilo de cor vermelha onde o +2 representa linhas pares e o 2n representa o intervalo de repetição.

/*Pintar somente a primeira linha*/
p:nth-child(1) {background: orange; }

/*Pintar todas as linhas pares*/
p:nth-child(2n+2){background: red; margin: 0px }

Resultado.

Parágrafo 1 de exemplo...

Parágrafo 2 de exemplo...

Parágrafo 3 de exemplo...

Parágrafo 4 de exemplo...

Parágrafo 5 de exemplo...

Parágrafo 6 de exemplo...

Parágrafo 7 de exemplo...

Para tabelas recomenda-se o uso do nth-child(even) e nth-child(odd) para que seja aplicado o estilo em toda linha, e os outros tipo de nth-child() são para situações mais especificas onde pode ser controlado o local que deseja aplicar o estilo.

O seletor nth-child ( ) aplica os estilos de cima para baixo, e para fazer a mesma função no inverso basta colocar no nome last no seletor, nth-last-child( ) e dessa maneira o estilo aplica de baixo para cima.