Коротка інформація
Псевдоклас :nth-of-type використовується для додавання стилю до елементів вказаного типу на основі нумерації в дереві елементів.
Синтаксис
елемент:nth-of-type(непарний | парний | <число> | <вираз>) { ... }
Значення
- непарний
- Усі непарні номери елементів.
- парний
- Усі парні номери елементів.
- число
- Порядковий номер вказаного елемента, починаючи з 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 | Усі парні елементи, аналог значення парний. |
| 2n+1 | 1, 3, 5, 7, 9 | Усі непарні елементи, аналог значення непарний. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| парний | 2, 4, 6, 8, 10 | Усі парні елементи. |
| непарний | 1, 3, 5, 7, 9 | Усі непарні елементи. |
Приклад
HTML5CSS3IECrOpSaFx
<!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>У цьому прикладі непарні зображення вирівнюються по лівому краю вікна, а парні зображення по правому.