CSS :first-child — перша дитина свого батька
CSS-селектор :first-child обирає елемент, який стоїть ПЕРШИМ серед дітей свого батька.
Загальний опис
автор: NagarD
Синтаксис
:first-child {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 3 | 3.1 | 9.5 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 4 |
Приклади
+ запропонувати свій приклад у пісочниці
:first-child перевіряє позицію серед усіх дітей батька: жовтим стає лише абзац, що стоїть першим.
HTML
<div>
<p>Перший p у div — жовтий.</p>
<p>Другий — без змін.</p>
</div>CSS
p:first-child {
background-color: yellow;
}Комбінація: курсив підсвічується лише всередині абзацу, який є першою дитиною свого батька.
HTML
<div>
<p>Перший абзац із <i>курсивом — жовтим</i>.</p>
<p>Другий абзац із <i>курсивом без змін</i>.</p>
</div>CSS
p:first-child i {
background: yellow;
}Селектор ul > :first-child бере першу дитину саме <ul> — нумерованого списку правило не стосується.
HTML
<ul>
<li>перший пункт ul — жовтий</li>
<li>другий</li>
</ul>
<ol>
<li>перший пункт ol — без змін</li>
</ol>CSS
ul > :first-child {
background: yellow;
}Перший пункт списку — жовтий, решта без змін.
HTML
<ul>
<li>перший — жовтий</li>
<li>другий</li>
<li>третій</li>
</ul>CSS
li:first-child {
background: yellow;
}Різниця, через яку :first-child «не працює»: перед абзацами стоїть заголовок, тож першою дитиною є він.
HTML
<section class="demo">
<h3>Заголовок — перша дитина</h3>
<p>Перший абзац: :first-child його НЕ вибере.</p>
<p>Другий абзац.</p>
</section>CSS
.demo {
font: 16px/1.5 system-ui, sans-serif;
max-width: 32rem;
}
/* спрацює на <h3>: саме він — перша дитина */
.demo :first-child {
color: #dc2626;
}
/* а це вибере перший абзац */
.demo p:first-of-type {
background: #eff6ff;
}Коментарі
Коментарів ще немає — будьте першим!