CSS :first-child Селектор – Как его использовать и почему?

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

Пример использования псевдокласса :first-child для изменения цвета первого абзаца внутри контейнера:

HTML код:

  
Первый абзац
  
Второй абзац
  
Третий абзац

CSS код:

.container p:first-child {
  color: red;
}

В результате первый абзац будет окрашен в красный цвет.

Также можно использовать псевдокласс :first-child в сочетании с другими селекторами для более точного выбора элементов.

Например, следующий код будет выбирать первый параграф в любом элементе с классом "container":

.container :first-child {
  color: blue;
}

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

В итоге, использование псевдокласса :first-child в CSS позволяет выбирать и изменять стиль первых дочерних элементов родительского элемента и существенно упрощает визуальное оформление веб-страниц.