Псевдоклас :nth-child() дозволяє вибрати елементи на основі їх положення в групі братських елементів. Загалом цей псевдоклас записується таким чином.
:nth-child(an ± b) { … }Замість a та b підставляються конкретні цілі числа, а n є лічильником і залишається у вихідному вигляді. Числа a та b можуть бути негативними або нулем, у такому разі їх можна не записувати — 2n+0 ідентично 2n.
Формулу an+b слід розуміти так: вибрати кожен a елемент, починаючи з b. Наприклад, 2n+3 означає вибрати кожен другий елемент, починаючи з третього. Замість n браузер самостійно підставляє числа, починаючи з 0. Тому ми можемо визначити, які елементи будуть вибрані, самостійно замінюючи n числами 0, 1, 2 і т.д. Таким чином, спершу вибереться третій елемент (2×0+3=3), потім п'ятий (2×1+3=5), сьомий (2×2+3=7) і так до кінця. Елементи з нульовим або негативним індексом ігноруються, оскільки таких елементів не існує. .
:nth-child(3)
Виберіть лише третій елемент.
:nth-child(1)
Виберіть перший елемент. Ідентичне використання :first-child.
:nth-child(n+3)
Вибрати всі елементи, починаючи з третього; іншими словами, всі елементи, крім перших двох.
:nth-child(2n)
Вибрати всі парні елементи. Замість 2n можна використовувати ключове слово even — :nth-child(even).
:nth-child(2n+1)
Вибрати всі непарні елементи. Замість формули можна використовувати ключове слово odd — :nth-child(odd).
:nth-child(-n+3)
Виберіть перші три елементи.
:nth-child(3n)
Виберіть кожен третій елемент.
:nth-child(3n+2)
Виберіть кожен третій елемент, починаючи з другого.
:nth-child(n+2):nth-child(-n +4)
Вибрати всі елементи з другого до четвертого.
У прикладі 1 показано виділення парних колонок таблиці іншим кольором. Таке чергування кольорових смуг полегшує сприйняття таблиці і дозволяє простіше знаходити дані, розташовані в одній колонці. Приклад 1. Колонки таблиці
<!
<html>
<head>
<meta charset="utf-8">
<title>:nth-child()</title> <style> table { width: 100%; }
th, td { padding: 4px; }
td:nth-child(even) { background: #c7c7c7; /* Колір тла парних осередків */
}
td:nth-child(odd) { background: #f0f0f0; /* Колір фону непарних осередків */
}
</style>
</head>
<body> <table> <thead> <tr> <th></th> <th>2023</th><th>2024</th><th>2025</th>
</tr>
</thead> <tbody> <tr> <td>Heft</td> <td>43</td><td>51</td><td>79</td>
</tr> <tr> <td>3олото</td> <td>29</td><td>34</td><td>48</td>
</tr> <tr> <td>Дерево</td> <td>38</td><td>57</td><td>36</td>
</tr>
</tbody>
</table>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Колонки таблиці
Слід пам'ятати, що :nth-child() працює тільки для однотипних братських елементів, на зразок < ;li>, <td>, <tr> та ін У наведеному нижче прикладі братськими (мають) спільного батька) є елементи <li>. При цьому елементи <a> не є братніми, тому що кожен з них має власний батько.
<code data-language="html"><ul> <li><a>Посилання</a></li> <li><a>Посилання</a></li> <li><a>Посилання</a></li> </ul>
В результаті селектор a:nth-child(2) для вибору другого посилання не працює. Щоб дістатися до неї, слід скористатися комбінованими селекторами. Звертаємось до другого пункту списку <li>, а вже потім до посилання <a>.
li:nth-child(2) > a { color: green; }