Как работает nth-child в CSS?

Question

nth-child — это псевдокласс, который выбирает элементы на основе их позиции среди всех дочерних элементов родителя. Нумерация начинается с 1, а не с 0. Селектор учитывает все дочерние элементы, а не только элементы нужного типа. Это важно отличать от nth-of-type.

YeaHub · Accepted Answer

nth-child часто используют для стилизации списков, таблиц и повторяющихся элементов.ОпределениеОпределение: :nth-child() — псевдокласс CSS, выбирающий элемент по его порядковому номеру среди всех дочерних элементов родителя.Как считается позицияБраузер:Берёт родительский элемент.Считает всех его дочерних элементов.Сравнивает позицию текущего элемента с формулой nth-child.Примеры использованияКонкретный номер:li:nth-child(2) {
  color: red;
}
Чётные и нечётные:li:nth-child(even) { }
li:nth-child(odd) { }
Формула:li:nth-child(3n + 1) { }
Частая ошибкаp:nth-child(2) { }
Сработает только если p — второй ребёнок родителя, а не второй p.Вывод: nth-child выбирает элементы по позиции среди всех соседей, а не по типу, что важно учитывать при написании селекторов.