CSS :nth-of-type() — кожен n-й елемент свого типу
CSS-селектор :nth-of-type(n) обирає n-й елемент серед сусідів ТОГО САМОГО тега.
Загальний опис
автор: NagarD
Синтаксис
:nth-of-type(number) {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Показує, які саме елементи вибирає формула nth-child.
Перевірка :nth-child — окремою сторінкою, з поясненням пасток.
Смугаста таблиця без класів: even фарбує кожен другий рядок, а формула -n+3 — лише перші три.
HTML
<ul class="rows">
<li>Рядок 1</li>
<li>Рядок 2</li>
<li>Рядок 3</li>
<li>Рядок 4</li>
<li>Рядок 5</li>
<li>Рядок 6</li>
</ul>CSS
.rows {
list-style: none;
margin: 0;
padding: 0;
max-width: 20rem;
font: 15px/1.4 system-ui, sans-serif;
}
.rows li {
padding: .5rem .75rem;
}
/* кожен другий */
.rows li:nth-of-type(even) {
background: #f1f5f9;
}
/* лише перші три: n пробігає 0,1,2 → 3,2,1 */
.rows li:nth-of-type(-n+3) {
border-left: 4px solid #2563eb;
}Лічба тільки серед елементів свого типу: заголовок на початку не рахується, червоним стає другий саме абзац.
HTML
<div>
<h3>Заголовок не рахується.</h3>
<p>Перший абзац.</p>
<p>Другий абзац — червоний.</p>
</div>CSS
p:nth-of-type(2) {
background: red;
}Коментарі
Коментарів ще немає — будьте першим!