:nth-child(): выбор по позиции среди соседних элементов
Nth-child выбирает элементы по их порядковому номеру среди дочерних элементов одного родителя. Нумерация начинается с единицы и не совпадает с индексами массива JavaScript.
Назначение
Nth-child выбирает элементы по их порядковому номеру среди дочерних элементов одного родителя. Нумерация начинается с единицы и не совпадает с индексами массива JavaScript.
Как это работает
Even выбирает чётные позиции, odd — нечётные, выражение an+b описывает последовательность. В базовом варианте учитываются соседние элементы разных типов; текстовые узлы не увеличивают номер.
Пример
<style>.positions>li{padding:.5rem}.positions>li:nth-child(even){background:#e5f3e9}.positions>li:nth-child(3){font-weight:700}</style>
<ol class="positions"><li>Создать файл</li><li>Добавить разметку</li><li>Проверить структуру</li><li>Подключить стили</li></ol>Что должно получиться
Второй и четвёртый пункты получают фон, третий — жирное начертание. Если вставить новый элемент в начало, позиции изменятся автоматически.
Граница применения и частая ошибка
Не назначайте смысловое состояние задачи через её текущий номер: после сортировки смысл может потеряться. Если нужен отбор по типу элемента, сравните nth-of-type. Скрытый CSS элемент всё ещё может участвовать в подсчёте позиции.
Самостоятельная проверка
Вставьте пункт в начало списка и проверьте результат. Затем скройте один пункт через display:none и объясните, почему остальные номера выбора не сдвинулись так же, как видимые строки.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.