Виберіть кожен 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

Сподіваюсь, що все ще живі, лише для новачків і не надто новачків, навіть виберіть кількість кожних п елементів та більш хитромудрі речі: 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 щодо 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)

— Марко
джерело

10

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

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

Приклади:

Виберіть кожну четверту дитину (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>

Розгорніть фрагмент

— Салман А
джерело