Псевдоклас :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" також буде виділена червоним кольором.
Результат цього прикладу показано на рис. 2.