Selecione todos os enésimos elementos em CSS

242

É possível selecionar, digamos, cada quarto elemento em um conjunto de elementos?

Ex: Eu tenho 16 <div>elementos ... Eu poderia escrever algo assim.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

Existe uma maneira melhor de fazer isso?

css css-selectors Derek Adair
fonte
1
Espero que todo mundo ainda esteja vivo, apenas para iniciantes e não tão novatos, até selecione uma quantidade a cada n elementos e coisas mais complicadas: nthmaster.com
gengns

Respostas:

419

Como o nome indica, permite construir uma expressão aritmética usando a variável, além de números constantes. Você pode executar adição ( ), subtração ( ) e multiplicação de coeficientes ( onde é um número inteiro, incluindo números positivos, números negativos e zero).:nth-child()n+-ana

Veja como você reescreveria a lista de seletores acima:

div:nth-child(4n)

Para uma explicação sobre como essas expressões aritméticas funcionam, veja minha resposta a esta pergunta , bem como as especificações .

Observe que esta resposta supõe que todos os elementos filhos no mesmo elemento pai sejam do mesmo tipo div. Se você tiver outros elementos de tipos diferentes, como h1ou p, será necessário usá-lo em :nth-of-type()vez de :nth-child()garantir que você conte apenas divelementos:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

Para todo o resto (classes, atributos ou qualquer combinação desses), em que você está procurando o enésimo filho que corresponde a um seletor arbitrário, não poderá fazer isso com um seletor CSS puro. Veja minha resposta a esta pergunta .

A propósito, não há muita diferença entre 4n e 4n + 4 em relação a :nth-child(). Se você usar a nvariável, ela começará a contar em 0. Isso é o que cada seletor corresponderia:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

Como você pode ver, os dois seletores corresponderão aos mesmos elementos acima. Nesse caso, não há diferença.

BoltClock
fonte
Eu apenas pensei em acrescentar que, se você estiver fazendo algo como apenas o quarto, precisará de algo como tr td:nth-child(4). Observe a falta de qualquer n entre colchetes
WORMSS 26/02
2
observe: Isso funciona apenas nos seletores de elementos (div, td, img etc.), não no seletor de classe como
.this
1
Criei uma demonstração interativa para explicar visualmente como o n-filho (n) funciona: xengravity.com/demo/nth-child . Eu achei a especificação do w3 particularmente assustadora para iniciantes nos quais a sintaxe é permitida; especificamente a seção 'Scanner Lexical'.
Xengravity
1
@xengravity: Obrigado por compartilhar! Concordo que a gramática não é amigável para iniciantes, pois foi escrita com implementadores em mente e não autores. A especificação fornece vários exemplos de como escrever a sintaxe, mas sem recursos visuais.
BoltClock
1
Eu criei
Salman A
12

Tente isto

div:nth-child(4n+4)
Marko
fonte
10

Você precisa do argumento correto para a nth-childpseudo classe.

  • O argumento deve estar na forma de an + bcorresponder a cada um thésimo filho a partir de b.

  • Ambos ae bsão inteiros opcionais e ambos podem ser zero ou negativo.

    • Se afor zero, então não há "cada um th criança" cláusula.
    • Se afor negativo, a correspondência será feita de trás para frente b.
    • Se bfor zero ou negativo, é possível escrever uma expressão equivalente usando positivo, bpor exemplo, 4n+0é o mesmo que 4n+4. Da 4n-1mesma forma é o mesmo que 4n+3.

Exemplos:

Selecione cada quarto filho (4, 8, 12, ...)

li:nth-child(4n) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>
Expandir snippet

Selecione cada quarto filho a partir de 1 (1, 5, 9, ...)

Mostrar snippet de código

Selecione cada terceiro e quarto filho de grupos de 4 (3 e 4, 7 e 8, 11 e 12, ...)

Mostrar snippet de código

Selecione os 4 primeiros itens (4, 3, 2, 1)

Mostrar snippet de código

Salman A
fonte