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

Определение и использование

CSS :first-child Псевдоклассы используются для выбора элементов, которые являются первым ребенком своего родителя (в группе братьев и сестер).

Пример

Пример 1

Выберите и установите стиль для каждого элемента <p>, который является первым ребенком своего родителя:

p:first-child {
  background-color: yellow;
}

Попробуйте сами

Пример 2

Выберите и установите стиль для каждого элемента <i>, который является первым ребенком своего родителя:

i:first-child {
  background: yellow;
}

Попробуйте сами

Пример 3

Выберите и установите стиль для первого элемента <li> в списке:

li:first-child {
  background: yellow;
}

Попробуйте сами

Пример 4

Выберите и установите стиль для первого ребенка каждого элемента <ul>:

ul > :first-child {
  background: yellow;
}

Попробуйте сами

CSS грамматика

:first-child {
  css-декларации;
}

Технические детали

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдокласс.