:first-child: первый элемент среди соседей
First-child выбирает элемент, если он стоит первым среди дочерних элементов родителя. Селектор полезен для оформления границ списка без назначения отдельного класса первому пункту.
Назначение
First-child выбирает элемент, если он стоит первым среди дочерних элементов родителя. Селектор полезен для оформления границ списка без назначения отдельного класса первому пункту.
Как это работает
Проверяется позиция среди элементов всех типов. Пробелы и комментарии перед элементом не меняют её, а добавленный заголовок — меняет. Сочетание p:first-child не означает первый абзац при любых соседях.
Пример
<style>.first-demo>p:first-child{border-top:3px solid #29724a;padding-top:1rem}</style>
<div class="first-demo"><p>Первое пояснение.</p><p>Следующее пояснение.</p></div>Что должно получиться
Рамку получает только первый абзац. После добавления h2 перед ним ни один p в контейнере не будет первым дочерним элементом, и правило перестанет применяться к абзацам.
Граница применения и частая ошибка
Не кодируйте важное состояние через случайное положение в DOM. Скрытый через display:none элемент всё равно остаётся участником структуры. Для первого элемента определённого типа существует first-of-type, а для бизнес-состояния обычно нужен отдельный класс или атрибут.
Самостоятельная проверка
Добавьте перед абзацем комментарий, затем заголовок и сравните результат. Проверьте правило в инспекторе. Объясните, почему удаление визуального отображения заголовка не возвращает абзацу статус first-child.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.