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

Псевдокласс :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; }

Синтаксис

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

Приклад

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

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

Браузери