Как использовать CSS nth-child last для стилизации последнего элемента

CSS псевдо-класс ":nth-child()" позволяет выбрать элементы, которые являются n-ными дочерними элементами своих родителей. Однако, иногда может возникнуть необходимость выбрать только последний элемент определённого типа.

Для этой цели можно использовать псевдо-класс ":last-child", который выбирает последний дочерний элемент заданного типа. Но бывает, что нам нужно выбрать только последний элемент, который является n-ным дочерним элементом родителя. В этом случае мы можем комбинировать псевдо-классы ":last-child" и ":nth-child()" для достижения нужного результата.

Рассмотрим пример. Предположим, у нас есть следующий HTML код:

html

  
Элемент 1
  
Элемент 2
  
Элемент 3
  
Элемент 4

Мы хотим применить определенный стиль только к последнему элементу списка, который является третьим дочерним элементом типа "li". Для этого мы можем использовать следующий CSS код:

css
li:nth-child(3):last-child {
  background-color: yellow;
}

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

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