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

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

225 голосов
/ 11 августа 2010

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

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

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

Ответы [ 4 ]

398 голосов
/ 11 августа 2010

Как видно из названия, :<b>n</b>th-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
...

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

24 голосов
/ 11 августа 2010
12 голосов
/ 11 августа 2010

Попробуйте это 

div:nth-child(4n+4)
8 голосов
/ 08 августа 2015

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

Выберите каждого 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...