| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0 + | 1.0 + | 9.6 + | 3.1 + | 3.6 + | 2.1 + | 2.0 + |
Коротка інформація
| Значення за умовчанням | Ні |
|---|---|
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/css3-selectors/#nth-child-pseudo |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Псевдоклас : nth-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів.
Синтаксис
елемент: nth-child (odd | even | <число> | <вираз> ) {...}
Значення
- odd
- Все непарні номери елементів.
- even
- Все парні номера елементів.
- число
- Порядковий номер дочірнього елемента відносно свого батька. Нумерація починається з 1, це буде перший елемент у списку.
- вираз
- Здається в вигляді an + b, де a і b цілі числа, а n - лічильник, який автоматично приймає значення 0, 1, 2 ...
Якщо a дорівнює нулю, то воно не пишеться і запис скорочується до b . Якщо b дорівнює нулю, то воно також не вказується і вираз записується в формі an . a і b можуть бути негативними числами, в цьому випадку знак плюс змінюється на мінус, наприклад: 5n-1.
За рахунок використання від'ємних значень a і b деякі результати можуть також вийти негативними або рівними нулю. Однак на елементи впливають тільки позитивні значення через те, що нумерація елементів починається з 1.
В табл. 1 наведені деякі можливі вирази і ключові слова, а також зазначено, які номери елементів будуть задіяні.
| Значення | Номери елементів | Опис |
|---|---|---|
| 1 | 1 | Перший елемент, є синонімом псевдокласу : first-child . |
| 5 | 5 | П'ятий елемент. |
| 2n | 2, 4, 6, 8, 10 | Все парні елементи, аналог значення even . |
| 2n + 1 | 1, 3, 5, 7, 9 | Все непарні елементи, аналог значення odd . |
| 3n + 2 | 2, 5, 8, 11, 14 | — |
| -n + 3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все парні елементи. |
| odd | 1, 3, 5, 7, 9 | Все непарні елементи. |
Приклад
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
nth-child </title>
<style>
table {width: 100%; /* Ширина таблиці */ border-spacing: 0; /* Відстань між осередками */ } tr: nth-child (2n) {background: #f0f0f0; /* Колір фону */ } tr: nth-child (1) {background: #666; /* Колір фону */ color: #fff; /* Колір тексту */ } </style>
</head>
<body>
<table border="1">
<tr>
<td>
</td>
<td>
2134 </td>
<td>
2135 </td>
<td>
2136 </td>
<td>
2137 </td>
<td>
2138 </td>
</tr>
<tr>
<td>
Нафта </td>
<td>
16 </td>
<td>
34 </td>
<td>
62 </td>
<td>
74 </td>
<td>
57 </td>
</tr>
<tr>
<td>
Золото </td>
<td>
4 </td>
<td>
69 </td>
<td>
72 </td>
<td>
56 </td>
<td>
47 </td>
</tr>
<tr>
<td>
Дерево </td>
<td>
7 </td>
<td>
73 </td>
<td>
79 </td>
<td>
34 </td>
<td>
86 </td>
</tr>
<tr>
<td>
Камені </td>
<td>
23 </td>
<td>
34 </td>
<td>
88 </td>
<td>
53 </td>
<td>
103 </td>
</tr>
</table>
</body>
</html>
В даному прикладі псевдоклас : nth-child використовується для зміни стилю першого рядка таблиці, а також для виділення кольором всіх парних рядків (рис. 1).
