Last Child CSS: как использовать селектор для стилизации последнего элемента в родительском контейнере

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

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

html

  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Последняя ссылка

css
ul li:last-child a {
  font-weight: bold;
  color: red;
}

В этом примере последней ссылкой будет "Последняя ссылка", которой будут применены стили с помощью псевдокласса :last-child.

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

html

  
Ячейка 1
Ячейка 2
  
Ячейка 3
Ячейка 4
  
Ячейка 5
Ячейка 6
  
Ячейка 7
Ячейка 8

css
tr:last-child {
  background-color: #ccc;
}

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

В обоих примерах использован псевдокласс :last-child, который выбирает последний дочерний элемент родительского элемента. Его можно комбинировать с другими псевдоклассами и селекторами, чтобы задавать более сложные правила стилей для элементов на странице.