Выберите каждый N-й элемент в CSS
можно ли выбрать, скажем, каждый четвертый элемент в наборе элементов?
Ex: у меня есть 16 <div>
элементы... Я мог бы написать что-нибудь подобное.
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
есть ли лучший способ сделать это?
4 ответов
как следует из названия, :nth-child()
позволяет построить арифметическое выражение, используя n
переменная в дополнение к постоянным числам. Вы можете выполнить сложение (+
), вычитание (-
) и коэффициент умножения (an
здесь a
- целое число, включая положительные числа, отрицательные числа и ноль).
вот как вы переписали бы приведенный выше список селекторов:
div:nth-child(4n)
для объяснения того, как эти арифметические выражения работают, см. Мой ответ на этот вопрос, а также spec.
обратите внимание, что этот ответ предполагает, что все дочерние элементы в одном родительском элементе имеют один и тот же тип элемента, 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
...
как вы можете видеть, оба селектора будут соответствовать тем же элементам, что и выше. В этом случае разницы нет.
вам нужен правильный аргумент для nth-child
псевдокласс.
аргумент должен быть в формате
an + b
чтобы соответствовать каждому ath ребенок, начиная с b.-
и
a
иb
опционные чисел и как может быть нулевой или отрицательной.- если
a
равно нулю, тогда нет " каждый ath ребенок" пункт. - если
a
отрицательно, затем сопоставление выполняется назад, начиная сb
. - если
b
равно нулю или отрицательно, тогда можно написать эквивалентное выражение, используя positiveb
например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>
Выберите каждый 4-й ребенок, начиная с 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>