CSS :first-of-type — перший елемент свого типу
CSS-селектор :first-of-type обирає перший елемент СВОГО тега серед сусідів — незалежно від того, що стоїть перед ним.
Загальний опис
автор: NagarD
Синтаксис
:first-of-type {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
На відміну від :first-child, селектор :first-of-type шукає перший елемент свого типу — заголовок перед абзацом йому не заважає.
HTML
<div>
<h3>Заголовок</h3>
<p>Перший p — червоний, хоч перед ним стоїть заголовок.</p>
<p>Другий p — без змін.</p>
</div>CSS
p:first-of-type {
background: red;
}Класична пастка: p:first-child не спрацює, бо перша дитина — заголовок. p:first-of-type бере перший абзац.
HTML
<section class="post">
<h2>Заголовок статті</h2>
<p>Перший абзац — саме його й хотіли підсвітити.</p>
<p>Другий абзац лишається звичайним.</p>
</section>CSS
.post {
font: 16px/1.5 system-ui, sans-serif;
max-width: 34rem;
}
/* нічого не вибере: перша дитина .post — це <h2> */
.post p:first-child {
outline: 2px dashed #dc2626;
}
/* а це — перший <p> серед сусідів */
.post p:first-of-type {
font-size: 1.15rem;
color: #1d4ed8;
}Коментарі
Коментарів ще немає — будьте першим!