| 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-of-type-pseudo |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Псевдоклас : nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів.
Синтаксис
елемент: nth-of-type (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 | Перший елемент. |
| 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-of-type </title>
<style>
img: nth-of-type (2n + 1) {float: left; } Img: nth-of-type (2n) {float: right; } </style>
</head>
<body>
<p>
<img src="images/left.gif" alt="">
<img src="images/right.gif" alt="">
</p>
<h1>
Історичний турнір </h1>
</body>
</html>
В даному прикладі непарні картинки вирівнюються по лівому краю вікна, а парні картинки по правому (рис. 1).
