:nth-child()

Псевдоклас CSS :nth-child() (дочірній номер N) дає збіг з елементами на основі їх позицій серед групи сестринських елементів.

Спробуйте його в дії

Слід зауважити, що в синтаксисі element:nth-child() підрахунок дочірніх елементів включає елементи усіх типів; проте збіг вважається збігом лише тоді, коли елемент на відповідній дочірній позиції належить до заданого типу елемента.

Синтаксис

:nth-child() приймає єдиний аргумент, що описує патерн для пошуку збігу серед індексів елементів у списку дочірніх. Індекси елементів починаються з 1.

:nth-child( <nth> [ of <complex-selector-list> ]? )

Значення – ключові слова

odd (непарний)

Представляє елементи, чия числова позиція в наборі дочірніх елементів – непарна: 1, 3, 5 тощо.

even (парний)

Представляє елементи, чия числова позиція в наборі дочірніх елементів – парна: 2, 4, 6 тощо.

Функційний запис

<An+B>

Представляє елементи, чий номер місця в наборі сестринських елементів дає збіг з патерном An+B для кожного невід'ємного значення n, де:

• A – цілий числовий крок,
• B – цілий числовий відступ,
• n – всі невід'ємні цілі числа, починаючи від 0.

Такий запис можна читати так: елемент списку номер An+B. І A, і B – мусять мати значення типу <integer>.

Приклади

Приклади селекторів

tr:nth-child(odd) чи tr:nth-child(2n+1)

Представляє непарні ряди таблиці HTML: 1, 3, 5 тощо.

tr:nth-child(even) чи tr:nth-child(2n)

Представляє парні ряди таблиці HTML: 2, 4, 6 тощо.

:nth-child(7)

Представляє сьомий елемент.

:nth-child(5n)

Представляє елементи номер 5 [=5×1], 10 [=5×2], 15 [=5×3] тощо. Перше значення, повернене як результат формули, – 0 [=5x0], що не дасть збігу, адже елементи індексуються від 1, тим часом n починається від 0. Це може здаватися, на перший погляд, дивним, але має більше змісту, коли врахувати, що частина формули B – >0, як в наступному прикладі.

:nth-child(n+7)

Представляє сьомий і всі наступні елементи: 7 [=0+7], 8 [=1+7], 9 [=2+7] тощо.

:nth-child(3n+4)

Представляє елементи 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4] тощо.

:nth-child(-n+3)

Представляє перші три елементи. [=-0+3, -1+3, -2+3]

p:nth-child(n)

Представляє кожний елемент <p> у групі сестринських елементів. Такий запис вибирає ті самі елементи, що й простий селектор p (але має вищу за нього специфічність).

p:nth-child(1) чи p:nth-child(0n+1)

Представляє кожний <p>, котрий є першим елементом в групі сестринських. Це те саме, що селектор :first-child (з такою само специфічністю).

p:nth-child(n+8):nth-child(-n+15)

Представляє елементи <p> в групі сестринських – від восьмого до п'ятнадцятого.

Розгорнутий приклад

HTML

<h3>
  <code>span:nth-child(2n+1)</code>, БЕЗ <code>&lt;em&gt;</code> серед дочірніх
  елементів.
</h3>
<p>Вибрані дочірні елементи 1, 3, 5 і 7.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, ІЗ <code>&lt;em&gt;</code> серед дочірніх
  елементів.
</h3>
<p>
  Вибрані дочірні елементи 1, 5 і 7.<br />
  3 враховується під час підрахунку, бо є дочірнім елементом, але не
  вибирається, бо не є <code>&lt;span&gt;</code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>Це `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, ІЗ <code>&lt;em&gt;</code> серед дочірніх
  елементів.
</h3>
<p>
  Вибрані дочірні елементи 1, 4, 6 і 8.<br />
  3 не враховується при підрахунку і не вибирається, бо є
  <code>&lt;em&gt;</code>, а не <code>&lt;span&gt;</code>, і
  <code>nth-of-type</code> вибирає лише дочірні елементи відповідного типу.
  <code>&lt;em&gt;</code> повністю пропускається й ігнорується.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>Це `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}

Результат

Специфікації

              <br />
              <small>
                  # nth-child-pseudo
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>