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

184

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

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

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

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

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

4 ответа

366
Лучший ответ

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

Здесь вы можете переписать список селекторов выше:

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

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

Поделиться
  • 0
    Я просто подумал, что добавлю, что если вы делаете что-то, например, только четвертое, то вам понадобится что-то вроде tr td:nth-child(4) . Обратите внимание на отсутствие n в скобках
  • 2
    обратите внимание: это работает только на селекторах элементов (div, td, img и т. д.), а не на селекторах классов, таких как .this
Показать ещё 5 комментариев
24 
div:nth-child(4n+4)

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

Поделиться
12

Попробуйте

div:nth-child(4n+4)
Поделиться
7

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

  • Аргумент должен быть в форме an + b для соответствия каждому дочернему элементу th начиная с b.

  • Оба a и b являются необязательными целыми числами, и оба могут быть нулевыми или отрицательными.

    • Если a равно нулю, то не существует "каждый a th child".
    • Если 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>

Выберите каждый третий и четвертый ребенка из групп из 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню