Выбрать каждый N-й элемент в CSS
Можно ли выбрать, скажем, каждый четвертый элемент в наборе элементов?
Пример: у меня есть 16 Есть ли лучший способ сделать это? div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
3 ответа
Как следует из названия, : n th-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-е child, который соответствует произвольному селектору, вы не сможете сделать это с помощью чистого селектора 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
...
Как видите, оба селектора будут соответствовать тем же элементам, что и выше. В этом случае разницы нет.