enésimo filho uma pseudo classe

Esta pseudoclasse corresponde ao elemento ou elementos que são o enésimo filho de seu pai. Em outras palavras, ele seleciona os elementos de acordo com uma equação entre parênteses.

A seguir é um exemplo

ul li: enésima criança (3n + 3) {fundo: rosa;}

Cenário

(A cor real do nosso rosa é: # e65768)

Aqui estamos selecionando cada terceiro item “li” dentro de qualquer “ul”, ou seja, o 3 °, 6 °, 9 °, etc. Mas a mágica está dentro dos parênteses. A equação no exemplo funcionaria da seguinte maneira, com o “n” começando em zero.

(3 x 0) + 3 = 3 = 3º Elemento <br/>
(3 x 1) + 3 = 6 = 6º Elemento <br/>
(3 x 2) + 3 = 9 = 9º Elemento <br/>
etc.

nth-child também aceita duas palavras-chave, ” even ” e ” odd “. Mesmo selecionando elementos ímpares 2, 4, 6, etc. Ímpar selecionando elementos ímpares 1, 3, 5, etc.


Aqui estão alguns outros exemplos:

Selecione todos, exceto os cinco primeiros (n + 6) <br/>
(0 + 6) = 6 = 6º Elemento <br/>
(1 + 6) = 7 = 7º Elemento <br/>
(2 + 6) = 8 = 8º Elemento <br/>
etc

Selecione os cinco primeiros (-n + 5) <br/>
(0 + 5) = 5 = 5º Elemento <br/>
(-1 + 5) = 4 = 4º Elemento <br/>
(-2 + 5) = 3 = 3º Elemento <br/>
(-3 + 5) = 2 = 2º Elemento <br/>
(-4 + 5) = 1 = 1º Elemento <br/>
etc

Selecione cada quarto elemento, começando no primeiro (4n + 1) <br/>
(4 (0) + 1) = 1 = 1º Elemento <br/>
(4 (1) + 1) = 5 = 5º Elemento <br />
(4 (2) + 1) = 9 = 9º Elemento <br/>
etc


Compatibilidade do navegador

Cenário

O Opera fica totalmente confuso no teste dinâmico.

Aqui está uma página do testador para brincar com as equações e ver os resultados.
testador enésimo filho

O testador foi construído por Chris Coyier e aqui você pode ler mais sobre a enésima pseudo classe.

Espero que ajude!