CSS first-child не работает: причины и как исправить быстро

hannadev

Многим разработчикам знакома ситуация, когда селектор :first-child в CSS просто игнорируется. Элемент не стилизуется, хотя по логике должен быть первым. Эта статья разберет типичные ошибки и покажет, как правильно использовать псевдокласс.

Разобраться в проблеме полезно, чтобы сэкономить часы на отладку. Вы узнаете, почему first-child считает все дочерние элементы родителя, а не только нужного класса. Плюс получите готовые решения для реальных задач в верстке.

Как работает :first-child и почему он подводит

Селектор :first-child выбирает первый дочерний элемент внутри родителя, независимо от его класса или типа. Если перед вашим блоком стоит другой элемент - даже пустой div или пробел - first-child применится к нему, а не к тому, что вы ожидали. Это базовое поведение CSS, описанное в спецификациях.

Представьте разметку с контейнером row, где первый div с классом col-6, а потом идут outer_box. Селектор .outer_box:first-child не сработает, потому что первый ребенок - col-6. Браузер парсит элементы строго по порядку в DOM. Поэтому стили игнорируются.

Вот типичный пример кода, где все ломается:

<div class="row">
  <div class="col-6">Контент</div>
  <div class="col-2 outer_box">Первый бокс</div>
  <div class="col-2 outer_box">Второй бокс</div>
</div>

CSS .outer_box:first-child { border-right: none; } не сработает - первый outer_box считается вторым ребенком.

Проверьте DOM в инспекторе: Откройте DevTools и посмотрите реальный порядок элементов. Часто там всплывают скрытые пробелы или лишние div.
Учитывайте типы элементов: :first-child работает со всеми детьми, включая текст и комментарии.
Тестируйте на чистой разметке: Уберите все лишнее, чтобы увидеть базовое поведение.

Селектор	Что выбирает	Пример проблемы
.box:first-child	Первый ребенок с классом box	Если перед box стоит div - не сработает
.box:nth-child(2)	Второй ребенок любой разметки	Работает, но привязан к позиции
div.box:first-of-type	Первый div среди div’ов	Игнорирует другие теги

Отличия :first-child от :first-of-type и когда их юзать

:first-of-type смотрит только на элементы одного типа, игнорируя другие теги. Это решает проблему, когда перед вашим div стоят p или span. Но если несколько div подряд - он выберет первый div, а не первый с классом.

В реальных проектах на Bootstrap или аналогах часто мешаются колонки разных размеров. :first-child ломается на первом попавшемся элементе, а :first-of-type может пропустить нужный, если типы смешаны. Поэтому комбинируйте с классами осторожно.

Пример: в контейнере три div, но первый - без класса nevrolog. .nevrolog:first-child не сработает, а div.nevrolog:first-of-type может выбрать не тот.

:first-child: Идеален для списков с одинаковыми элементами, где нет мусора.
:first-of-type: Подходит, когда тип элементов известен, но классы разные. Нюанс: не работает с универсальными селекторами.
nth-child(n): Для точного позиционирования, когда first-child подводит.

Псевдокласс	Учитывает класс?	Учитывает тип?	Лучше для…
:first-child	Нет	Все дети	Чистых списков
:first-of-type	Нет	Только тип	Смешанной разметки
:nth-child(1)	Нет	Все дети	Фиксированной позиции

Альтернативы :first-child для сложных случаев

Когда first-child не справляется из-за сложной структуры, переходите на :nth-child или JS. В CSS3 есть :nth-child(1), который точно бьет по первому ребенку. Для первого элемента с классом используйте комбинации или атрибуты.

В мобильной верстке или гридах часто добавляются динамические элементы. Там :first-child ломается на пустых контейнерах. Лучше nth-child(2):first-of-type, если знаете структуру.

Пример фикса для outer_box:

.row > .outer_box:nth-child(2) { border-right: none; }

Это гарантированно выберет второй outer_box, если он всегда на второй позиции.

nth-child с формулой: :nth-child(odd) для нечетных, an+b для паттернов. Полезно в таблицах.
Атрибуты data-first: Добавьте data-first=“true” к нужному и селектор [data-first].
Flexbox/grid трюки: order: 0 на первом, чтобы переставить визуально.
JS как запасной: querySelector(‘.outer_box’) и addClass, если CSS не тянет.

Тестирование и отладка в реальном проекте

Всегда проверяйте селекторы в инспекторе браузера - там видно, к какому элементу применяется стиль. Если :first-child не матчит, ищите предшественников в DOM. Часто проблема в пробелах между тегами или генерируемом контенте.

В больших проектах используйте препроцессоры вроде Sass для вложенных селекторов. Но базовые правила CSS остаются - first-child не меняется годами. Тестируйте на разных разрешениях, особенно в responsive.

/* Универсальный фикс для первого видимого */
.outer_box { display: none; }
.row > .outer_box:first-of-type { display: block; }

DevTools хак: Выделите элемент, inspect -> Styles, смотрите specificity.
Кроссбраузер: :first-child работает везде с IE9+, но тестируйте на мобильных.
Производительность: Избегайте сложных nth в циклах - браузер тормозит.

Практические кейсы из верстки на каждый день

В Grid-системах первый блок часто без бордера, но с :first-child это ад. Решение - комбо nth-child и классов. Или используйте CSS custom properties для динамики.

Остается тема родительских селекторов - их нет в CSS, но :has() в новых браузерах меняет игру. Пока полагайтесь на проверенные хаки. Подумайте о рефакторинге разметки - иногда проще почистить HTML, чем мучится с селекторами.