CSS first-child: правила и примеры использования

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

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

Например, если у нас есть следующая HTML-структура:

<div class="container">
  <p>Первый параграф</p>
  <p>Второй параграф</p>
  <p>Третий параграф</p>
</div>

Мы можем использовать псевдо-класс :first-child для применения стилей к первому параграфу внутри контейнера. Для этого применим следующий CSS-код:

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

В результате первый параграф станет красным.

Также, псевдо-класс :first-child может быть применен не только к элементам <p>, но и к другим элементам, таким как <li> или <div>. Например:

<ul>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
</ul>

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

В этом примере мы жирным шрифтом выделяем первый элемент списка.

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

<div class="container">
  <h2>Заголовок</h2>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</div>

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

В данном случае мы выбираем первый <p> внутри контейнера с классом .container и применяем к нему стиль, а затем выбираем следующий элемент <p> и применяем к нему другой стиль. В результате первый параграф будет иметь один цвет, а следующий параграф - другой.

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