СSS первый элемент: принципы и примеры использования

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

Вот пример использования селектора :first-child:

HTML-код:

html

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

CSS-код:

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

В этом примере мы выбираем первый абзац, который является потомком элемента с классом "container". Затем мы применяем стиль к этому выбранному элементу, в данном случае, мы устанавливаем красный цвет текста.

Результат будет таким, что первый абзац будет отображаться красным цветом, а остальные - в том цвете, которым они были по умолчанию:

Первый абзац

Второй абзац

Третий абзац

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

HTML-код:

html

  
Первый элемент списка
  
Второй элемент списка
  
Третий элемент списка

CSS-код:

css
ul li:first-child {
  font-weight: bold;
}

В этом примере мы выбираем первый элемент списка, который является потомком элемента

. Затем мы устанавливаем полужирное начертание для выбранного элемента.

Результат будет таким, что первый элемент списка будет отображаться полужирным шрифтом, а остальные элементы - в том начертании, которым они были по умолчанию:

Первый элемент списка

Второй элемент списка

Третий элемент списка

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