Выберите каждый N-й элемент в CSS

242

Можно ли выбрать, скажем, каждый четвертый элемент в наборе элементов?

Пример: у меня есть 16 <div>элементов ... Я мог бы написать что-то вроде.

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

Есть лучший способ сделать это?

css css-selectors

— Дерек Адэйр
источник

1

Надеюсь, что все еще живы, только для новичков, а не для новичков, даже выберите количество каждые n элементов и более хитрые вещи: nthmaster.com

— gengns

419

Как следует из названия, позволяет создавать арифметическое выражение, используя переменную в дополнение к постоянным числам. Вы можете выполнить сложение ( ), вычитание ( ) и умножение коэффициента ( где целое число, включая положительные числа, отрицательные числа и ноль).:nth-child()n+-ana

Вот как бы вы переписали приведенный выше список селекторов:

div:nth-child(4n)

Для объяснения того, как работают эти арифметические выражения, смотрите мой ответ на этот вопрос , а также спецификации .

Обратите внимание, что в этом ответе предполагается, что все дочерние элементы в одном и том же родительском элементе имеют одинаковый тип элемента div. Если у вас есть какие-либо другие элементы разных типов, такие как h1или p, вам нужно будет использовать :nth-of-type()вместо того, :nth-child()чтобы обеспечить подсчет только divэлементов:

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

Для всего остального (классов, атрибутов или любой их комбинации), где вы ищете n-й дочерний элемент, который соответствует произвольному селектору, вы не сможете сделать это с помощью чистого CSS-селектора. Смотрите мой ответ на этот вопрос .

Кстати, между 4n и 4n + 4 нет особой разницы в отношении :nth-child(). Если вы используете nпеременную, она начинает отсчитывать с 0. Это то, что будет соответствовать каждый селектор:

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

Как видите, оба селектора будут соответствовать тем же элементам, что и выше. В этом случае разницы нет.

— BoltClock
источник

Я просто подумал, что добавлю, если вы делаете что-то, например, только четвертое, то вам нужно что-то такое, как tr td:nth-child(4). Обратите внимание на отсутствие n в скобках

— WORMSS

2

обратите внимание: это работает только на селекторах элементов (div, td, img и т. д.), а не на селекторах классов, таких как

— .this

1

Я создал интерактивную демонстрацию, чтобы визуально объяснить, как работает nth-child (n): xengravity.com/demo/nth-child . Я обнаружил, что спецификация w3 особенно устрашает новичков, которым разрешен синтаксис; в частности, раздел «Лексический сканер».

— xengravity

1

@xengravity: Спасибо, что поделились! Я согласен, грамматика не подходит для начинающих, так как она была написана для разработчиков, а не для авторов. Спецификация предоставляет ряд примеров того, как написать синтаксис, но без сопровождающих визуальных элементов.

— BoltClock

1

Я сделал похожий инструмент для игры с выражениями nth-child: salman-w.googlecode.com/svn/trunk/css/…

— Salman A

24

div:nth-child(4n+4)

Смотрите: http://css-tricks.com/how-nth-child-works/

— Томалак
источник

12

Попробуй это

div:nth-child(4n+4)

— Marko
источник

10

Вам нужен правильный аргумент для nth-childпсевдокласса.

Аргумент должен быть в форме , an + bчтобы соответствовать каждому а ^й ребенка , начиная с б.
Оба aи bявляются необязательными целыми числами, и оба могут быть нулевыми или отрицательными.
- Если aравен нулю , то нет «каждого а ^й ребенок» положение.
- Если aотрицательно, то сопоставление выполняется в обратном порядке, начиная с b.
- Если bноль или отрицательный, то можно написать эквивалентное выражение, используя положительный, bнапример, 4n+0такой же, как 4n+4. Точно так 4n-1же, как 4n+3.

Примеры:

Выберите каждого 4-го ребенка (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>

Развернуть фрагмент

Выберите каждого четвертого ребенка, начиная с 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>

Развернуть фрагмент

Выберите каждого 3-го и 4-го ребенка из групп 4 (3 и 4, 7 и 8, 11 и 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>

Развернуть фрагмент

Выберите первые 4 пункта (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>

Развернуть фрагмент

— Салман А
источник