Existe um seletor CSS, na verdade um pseudo-seletor, chamado nth-child. Aqui estĂĄ um exemplo de como usĂĄ-lo:
ul li: enésimo filho (3n + 3) {
cor: #ccc;
}
O que o CSS acima faz Ă© selecionar cada terceiro item da lista dentro de listas nĂŁo ordenadas. Ou seja, 3, 6, 9, 12, etc. Mas como isso funciona? E que outros tipos de coisas vocĂȘ pode fazer com o enĂ©simo filho? Vamos dar uma olhada.
Tudo se resume ao que estĂĄ entre esses parĂȘnteses. nth-child aceita duas palavras-chave nesse local: par e Ămpar. Isso deve ser bastante Ăłbvio. âParâ seleciona elementos de numeração par, como o 2Âș, 4Âș, 6Âș, etc. âĂmparâ seleciona elementos de numeração Ămpar, como 1Âș, 3Âș, 5Âș, etc.
Como visto no primeiro exemplo, o n-Ă©simo filho tambĂ©m aceita expressĂ”es entre esses parĂȘnteses. A expressĂŁo mais simples possĂvel? Apenas um nĂșmero. Se vocĂȘ colocar apenas um nĂșmero entre parĂȘnteses, ele corresponderĂĄ apenas a esse elemento de nĂșmero. Por exemplo, aqui estĂĄ como selecionar apenas o quinto elemento:
ul li: enésimo filho (5) {
cor: #ccc;
}
Vamos voltar ao â3n + 3â do exemplo original. Como isso funciona? Por que ele seleciona cada terceiro elemento? O truque Ă© entender o ânâ e a expressĂŁo algĂ©brica que representa. Pense em ânâ como começando em zero e, em seguida, um conjunto de todos os inteiros positivos. Em seguida, complete a expressĂŁo. Portanto, o 3n Ă© â3xnâ, e a expressĂŁo inteira junto Ă© â(3xn) +3â. Agora substituindo o zero e inteiros positivos, obtemos:
(3 x 0) + 3 = 3 = 3Âș Elemento
(3 x 1) + 3 = 6 = 6Âș Elemento
(3 x 2) + 3 = 9 = 9Âș Elemento,
etc.
Que tal o: enésimo filho (2n + 1)?
(2 x 0) + 1 = 1 = 1Âș elemento
(2 x 1) + 1 = 3 = 3Âș elemento
(2 x 2) + 1 = 5 = 5Âș elemento
etc.
Ei, espere! Ă o mesmo que âestranhoâ, entĂŁo provavelmente nĂŁo preciso usar esse com muita frequĂȘncia. Mas espere agora. NĂŁo expusemos nosso exemplo original como sendo excessivamente complicado? E se em vez de â3n + 3â, usĂĄssemos â3n + 0â, ou ainda mais simples â3nâ.
(3 x 0) = 0 = sem correspondĂȘncia
(3 x 1) = 3 = 3Âș elemento
(3 x 2) = 6 = 6Âș elemento
(3 x 3) = 9 = 9Âș elemento
etc.
Como vocĂȘ pode ver, as correspondĂȘncias sĂŁo exatamente as mesmas, nĂŁo hĂĄ necessidade de â+3â. Podemos usar valores n negativos, bem como usar subtração nas expressĂ”es. Por exemplo, 4n-1:
(4 x 0) – 1 = -1 = sem correspondĂȘncia
(4 x 1) – 1 = 3 = 3Âș elemento
(4 x 2) – 1 = 7 = 7Âș elemento
etc.
Usar valores â-nâ parece um pouco estranho, porque se o resultado final for negativo nĂŁo hĂĄ correspondĂȘncia, entĂŁo vocĂȘ precisarĂĄ adicionar Ă expressĂŁo para obtĂȘ-la novamente positiva. Acontece que essa Ă© uma tĂ©cnica bastante inteligente. VocĂȘ pode usĂĄ-lo para selecionar os âprimeiros n elementosâ com â-n + 3â:
-0 + 3 = 3 = 3Âș elemento
-1 + 3 = 2 = 2Âș elemento
-2 + 3 = 1 = 1Âș elemento
-3 + 3 = 0 = sem correspondĂȘncia
etc.
Sitepoint tem um bom guia de referĂȘncia, que inclui esta mesa Ăștil que irei republicar descaradamente aqui:
n2n + 14n + 14n + 44n5n-2-n + 30114â31358432259128813713161213-4917201618-51121242023-
COMPATIBILIDADE DO BROWSER
nth-child Ă© um daqueles atributos CSS bastante infelizes que ficam presos entre a compatibilidade quase total entre navegadores, exceto pelo suporte completamente zero no IE, mesmo no IE 8. Portanto, quando se trata de uso, se o resultado final for âaprimoramento progressivo âDe alguma forma (por exemplo, aplicando uma paleta de cores legais Ă s linhas da tabela, por exemplo), entĂŁo vĂĄ em frente. Mas vocĂȘ provavelmente nĂŁo deve usĂĄ-lo se estiver fazendo algo mais importante, como confiar nele para a estrutura do site. Por exemplo, removendo a margem direita de cada terceira caixa em uma grade de trĂȘs por trĂȘs caixas, para que elas se encaixem corretamente.
Uma vantagem aqui Ă© que se vocĂȘ estiver usando jQuery, que oferece suporte a todos os seletores CSS, incluindo: nth-child, o seletor funcionarĂĄ, mesmo no Internet Explorer.