Mais controle sobre as seleções :nth-child() com a sintaxe S

Filtre um conjunto de elementos filhos antes de aplicar a lógica An+B a ele.

Bramus

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)