Filtre um conjunto de elementos filhos antes de aplicar a lógica An+B a ele.
Os seletores da pseudoclasse :nth-child()
e :nth-last-child()
Com o seletor de pseudoclasse :nth-child()
, é possível selecionar elementos no DOM pelo índice. Com a microssintaxe An+B
, você tem um controle preciso sobre quais elementos quer selecionar.
:nth-child(2)
: seleciona o segundo filho.:nth-child(2n)
: seleciona todos os filhos pares (2nd, 4th, 6th, 8th e assim por diante).:nth-child(2n+1)
: seleciona todos os filhos ímpares (1st, 3rd, 5th, 7th e assim por diante).:nth-child(5n+1)
: seleciona o primeiro (=(5×0)+1), 6o (=(5×1)+1), 11o (=(5×2)+1), ... filho.:nth-child(5n+2)
: selecione o segundo (=(5×0)+2), 7o (=(5×1)+2), 12o (=(5×2)+2), ... filho.
No entanto, é possível fazer mais seleções de criativos se omitir o parâmetro A
. Exemplo:
:nth-child(n+3)
: seleciona todos os filhos do terceiro item (3o, 4o, 5o e assim por diante).:nth-child(-n+5)
: seleciona todas as crianças até o 5o ano (1o, 2o, 3o, 4o, 5o).
Combine algumas dessas seleções de :nth-child()
e você poderá selecionar intervalos de elementos:
:nth-child(n+3):nth-child(-n+5)
: seleciona todos os filhos do 3o ao 5o (3o, 4o, 5o).
Usando :nth-last-child()
, é possível fazer seleções semelhantes, mas, em vez de começar a contar do início, você começa a contar do fim.
Pré-filtragem de seleções com a sintaxe of S
Uma novidade do nível 4 dos seletores de CSS é a possibilidade de transmitir uma lista de seletores para :nth-child()
e :nth-last-child()
.
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)
Quando of S
é especificado, a lógica An+B
só é aplicada aos elementos que correspondem à lista de seletores S
determinada. Isso significa que você pode pré-filtrar os filhos antes que An+B
faça isso.
Compatibilidade com navegadores
- 111
- 111
- 113
- 9
Exemplos
Por exemplo, :nth-child(2 of .highlight)
seleciona o segundo elemento correspondente que tem a classe .highlight
. De outra forma: entre todos os filhos com a classe .highlight
, selecione o segundo.
Isso é diferente de .highlight:nth-child(2)
, que seleciona o elemento que tem a classe .highlight
e também é o segundo filho.
Na demonstração abaixo, é possível notar essa diferença:
- O elemento correspondente a
:nth-child(2 of .highlight)
tem um contorno rosa. - O elemento correspondente a
.highlight:nth-child(2)
tem um contorno verde.
S
é uma lista de seletores, ou seja, ela aceita vários seletores separados por uma vírgula. Por exemplo, :nth-child(4 of .highlight, .sale)
seleciona o quarto elemento, que é .highlight
ou .sale
, de um conjunto de irmãos.
Na demonstração abaixo, o elemento correspondente a :nth-child(4 of .highlight, .sale)
tem um contorno laranja.
Revisitando as listras de zebra
Um exemplo clássico em que :nth-child()
é usado é na criação de uma tabela listrada. É uma técnica visual em que cada linha da tabela alterna cores. Normalmente, essa abordagem seria feita da seguinte maneira:
tr:nth-child(even) {
background-color: lightgrey;
}
Isso funciona bem para tabelas estáticas, mas se torna problemático quando você começa a filtrar dinamicamente o conteúdo da tabela. Quando, por exemplo, a linha dois fica oculta, você fica com as linhas um e três visíveis, cada uma com a mesma cor de fundo.
Para corrigir isso, podemos usar :nth-child(An+B [of S]?)
excluindo as linhas ocultas da lógica An+B
:
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}
Isso é muito útil, não é?
Foto de Markus Spiske no Unsplash (links em inglês)