CSS :nth-child() — кожен n-й елемент за формулою
CSS-селектор :nth-child(n) обирає елементи за їхнім номером серед дітей батька — за формулою, а не поштучно.
Загальний опис
автор: NagarD
Синтаксис
:nth-child(number) {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Показує, які саме елементи вибирає формула nth-child.
Перевірка :nth-child — окремою сторінкою, з поясненням пасток.
Три формули на одному списку: even — смуги, 3n — кожен третій, -n+2 — лише перші два.
HTML
<ul class="grid">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>CSS
.grid {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: 0;
font: 16px system-ui, sans-serif;
}
.grid li {
width: 3rem;
padding: .75rem 0;
text-align: center;
border: 1px solid #cbd5e1;
border-radius: 6px;
}
.grid li:nth-child(even) { background: #f1f5f9; }
.grid li:nth-child(3n) { border-color: #2563eb; }
.grid li:nth-child(-n+2) { font-weight: 700; color: #2563eb; }p:nth-child(2) вимагає двох речей одразу: елемент другий серед усіх дітей батька і це саме абзац. Якби другим стояв заголовок — не спрацювало б.
HTML
<div>
<p>Перший абзац.</p>
<p>Другий — червоний.</p>
<p>Третій.</p>
</div>CSS
p:nth-child(2) {
background: red;
}Коментарі
Коментарів ще немає — будьте першим!