First Child - Все о рождении первенца

First-child - это псевдокласс в CSS, который выбирает первый дочерний элемент внутри своего родителя.

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

html

  
Первый элемент
  
Второй элемент
  
Третий элемент

Мы можем использовать псевдокласс first-child, чтобы выбрать первый элемент списка:

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

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

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

html

  
Первый текстовый блок
  
Второй текстовый блок

И соответствующий CSS-код:

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

В этом примере мы устанавливаем синий цвет для текста первого параграфа внутри контейнера div.

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

html

  

    
Ячейка 1
    
Ячейка 2
  
  

    
Ячейка 3
    
Ячейка 4
  

Мы можем использовать псевдокласс first-child, чтобы добавить стили к первой ячейке каждой строки:

css
table tr td:first-child {
  background-color: yellow;
}

Этот код задаст желтый фон для каждой первой ячейки в таблице.

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