Псевдоклас :first-child

Оновлено: 11.01.2023

Псевдокласс :first-child

Псевдоклас :first-child задає стиль першого елемента в групі братніх елементів (які мають один батьківський елемент).

Як приклад розглянемо такий код HTML:

<article>
<h1>Роль цитокінів при дорсалгії</h1>
<p>Автор: Гордон Фрімен, канд. фіз.-мат. наук</p>
<p>Зміст статті</p>
<address>Пошта: freemen@blackmesa.com</address>
<p>Опублікована: <time datetime="2018-11-27">27 листопада 2018</time></p>
</article>

Псевдоклас :first-child без зазначення селектора вибере всі перші елементи всередині <article> і встановить для них червоний колір тексту. Тут першими йдуть <h1> і <time>, вони й будуть обрані.

article :first-child { color: red; }

При додаванні селектора до :first-child спершу береться перший елемент, потім дивиться якого він типу. Якщо елемент збігається із зазначеним селектором, то він буде обраний. Таким чином, вибирається елемент, якщо він задовольняє двом умовам одночасно: це перший елемент і це елемент зазначеного типу. Тут червоним кольором буде виділено заголовок, оскільки першим йде саме <h1>.

article h1:first-child { color: red; }

Якщо замість h1 використовувати інший селектор, то нічого вибрано не буде, оскільки не виконується умова "перший елемент це <p>".

article p:first-child { color: red; }

Для вибору першого елемента певного типу використовуйте псевдоклас :first-of-type.

Замість :first-child припустимо використовувати :nth-of-child(1).

Синтаксис

<i>Селектор</i>:first-child { ... }

Приклад

Результатом прикладу є рис. 1. В цьому прикладі псевдоклас :first-child додається до селектора b і встановлює для нього червоний колір тексту. Хоча контейнер <b>зустрічається в першому абзаці тричі, червоним кольором буде виділено лише першу згадку, тобто текст «Lorem ipsum». У решті випадків вміст контейнера <b> відображається чорним кольором. З наступним абзацом усе починається знову, оскільки батьківський елемент змінився. Тому фраза "Ut wisis enim" також буде виділена червоним кольором.

Рис. 1. Виділення кольором першого дочірнього елемента абзацу

Результат цього прикладу показано на рис. 2.

Рис. 2. Посилання з лінією зліва

Браузери

:first-child

Переглянути сумісність з Can I use?

:first-child