css3 – enĂ©simo filho Works

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.