Справочник HTML & CSS

:first-child

Срабатывает у элемента, который стоит первым среди детей своего родителя.

Синтаксис

selector:first-child { … }

Примеры

Выделяется только первый пункт:

<style>
  li:first-child { font-weight: bold; color: crimson; }
</style>
 
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Примечания

Элемент должен быть первым среди всех детей, а не только среди элементов своего типа: если перед абзацами стоит заголовок, p:first-child ничего не выберет. В таком случае берите :first-of-type. :only-child срабатывает у элемента без соседей.

См. также

:last-child — Срабатывает у элемента, который стоит последним среди детей своего родителя.
:nth-child() — Выбирает детей по их номеру: третий, каждый чётный, каждый третий.
:nth-of-type() — Как `:nth-child()`, но считает только соседей с тем же тегом.

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.

Спасибо, что читаете!