:nth-of-type(): позиция среди элементов одного типа
Nth-of-type считает позицию элемента среди соседей с тем же именем тега. Это отличается от nth-child, который в базовой форме считает все соседние элементы.
Назначение
Nth-of-type считает позицию элемента среди соседей с тем же именем тега. Это отличается от nth-child, который в базовой форме считает все соседние элементы.
Как это работает
Нумерация начинается с единицы. Селектор p:nth-of-type(2) выбирает второй p среди соседних p, даже если между ними есть заголовок. Добавленный класс не превращает подсчёт в нумерацию только элементов этого класса.
Пример
<style>.type-demo>p:nth-of-type(2){padding:.7rem;background:#e0f0e5}</style>
<section class="type-demo"><h2>Учебная заметка</h2><p>Первый абзац.</p><h3>Уточнение</h3><p>Второй абзац.</p></section>Что должно получиться
Фон получает второй абзац, хотя он является четвёртым дочерним элементом секции. Заголовки не входят в подсчёт позиции среди p.
Граница применения и частая ошибка
Запись .card:nth-of-type(2) не означает вторую карточку класса card, если рядом есть другие элементы того же тега. Для устойчивого смыслового выбора не полагайтесь на позицию после произвольной сортировки содержимого.
Самостоятельная проверка
Замените селектор на p:nth-child(2) и сравните выделение. Добавьте ещё один p перед выбранным. Затем создайте два разных класса на одинаковых тегах и объясните, какие элементы участвуют в подсчёте.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.