Привет! Почему срабатывает .item:nth-of-type(4n + 2), если это первый элемент

Привет! В CSS селектор .nth-of-type(n) работает немного не так, как можно было бы ожидать, исходя из его названия. Селектор .nth-of-type применяется к элементам внутри их родителя и считает всех детей одного типа (например, всех <div>), не учитывая другие классы или идентификаторы. Если элемент .ghost-item является первым элементом типа <div> внутри его родителя, то он будет учитываться в вычислении псевдокласса :nth-of-type(), даже если у него другой класс. Соответственно, первый элемент с классом .item будет считаться вторым типом <div> внутри его родителя, если перед ним есть другой <div>, и селектор :nth-of-type(4n + 2) будет на него применяться. Чтобы исключить .ghost-item из вычислений nth-of-type и применять стили только к элементам с классом .item, можно использовать следующие подходы: 1. Изменить разметку HTML, чтобы .ghost-item и .item были разными типами элементов. Например, .ghost-item может быть <span>, а .item останутся <div>. Таким образом, nth-of-type будет применяться только к <div> с классом .item. 2. Использовать другой подход к стилизации, например, класс-модификатор для элементов, которым нужно применить стили, и стилизовать их напрямую через классы, не зависящие от их порядка. Если изменение HTML структуры не подходит и нужно именно использовать nth-of-type, тогда нужно убедиться, что элементы, которые вы не хотите считать, не являются тем же типом элемента, что и те, к которым вы хотите применить nth-of-type.

169 похожих чатов

Привет! Почему срабатывает .item:nth-of-type(4n + 2), если это первый элемент

5 ответов

Похожие вопросы