Wybierz każdy n-ty element w CSS

Czy można wybrać, powiedzmy, co czwarty element w zbiorze elementów?

Ex: mam 16 <div> elementów... Mógłbym napisać coś takiego.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
Czy jest na to lepszy sposób?
Author: BoltClock, 2010-08-11
Source

4 answers

Jak sama nazwa wskazuje, :nth-child() pozwala na skonstruowanie wyrażenia arytmetycznego za pomocą zmiennej n oprócz stałych liczb. Można wykonać dodawanie (+), odejmowanie (-) i mnożenie współczynnika (an gdzie a jest liczbą całkowitą, w tym liczbą dodatnią, liczbą ujemną i zerem).

Oto jak przepisać powyższą listę selektorów: 

div:nth-child(4n)

Aby uzyskać wyjaśnienie, jak działają te wyrażenia arytmetyczne, zobacz moją odpowiedź na to pytanie , a także spec.

Należy zauważyć, że ta odpowiedź zakłada, że wszystkie elementy potomne w tym samym elemencie nadrzędnym są tego samego typu elementu, div. Jeśli masz inne elementy różnych typów, takie jak h1 lub p, musisz użyć :nth-of-type() zamiast :nth-child(), aby upewnić się, że liczysz tylko div elementy: 

<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>

Dla wszystkiego innego (klasy, atrybuty lub dowolna ich kombinacja), gdzie szukasz n-tego dziecka jeśli pasuje do dowolnego selektora, nie będziesz w stanie tego zrobić za pomocą czystego selektora CSS. Zobacz moją odpowiedź na to pytanie.

Przy okazji, nie ma dużej różnicy między 4n a 4n + 4 w odniesieniu do :nth-child(). Jeśli użyjesz zmiennej n, zacznie ona liczyć od 0. To jest to, co każdy selektor pasuje:

: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
...

Jak widać, oba selektory będą pasowały do tych samych elementów, co powyżej. W tym przypadku nie ma różnicy.

 378
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:14
 24
Author: Tomalak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-25 17:07:03

Try this 

div:nth-child(4n+4)
 12
Author: Marko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-25 17:43:00

Potrzebujesz poprawnego argumentu dla nth-child pseudo Klasa.

  • Argument powinien być w formie an + b, aby dopasować każde ath dziecko zaczynające się od b.

  • Zarówno a jak i {[11] } są opcjonalnymi liczbami całkowitymi i obie mogą być zerowe lub ujemne.

    • Jeśli a jest zerem, to nie maklauzuli"każdy a th dziecko".
    • Jeśli a jest ujemne, dopasowanie odbywa się wstecz, zaczynając od b.
    • jeśli b jest zerowe lub ujemne, to możliwe jest zapisanie równoważnego wyrażenia za pomocą dodatniego b np. 4n+0 jest takie samo jak 4n+4. Podobnie 4n-1 jest takie samo jak 4n+3.

Przykłady:

Wybierz co czwarte dziecko (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>

Wybierz co czwarte dziecko zaczynając od 1 (1, 5, 9, ...)

li:nth-child(4n+1) {
  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>

Wybierz co 3 i 4 dziecko z grupy 4 (3 i 4, 7 oraz 8, 11 i 12, ...)

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  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>

Wybierz pierwsze 4 pozycje (4, 3, 2, 1)

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  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>
 8
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-26 08:32:42