Страницы

Поиск по вопросам

среда, 10 июля 2019 г.

Проблема с CSS (nth-of-type)

Имеется примерно следующая конструкция:

Наполение
Наполение
Наполение

Хочу покрасить фон поочередно, использую следующее:
.block-tovar:nth-of-type(even) { background-color: @BGColorOne; }
Но увы ничего не происходит. Делаю через Brackets, он даже подсвечивать не хочет. Без псевдокласса всё нормально, а с ним не видит. Пробовал писать просто row.tripleRow .block-tovar так он тоже не видит. В чём проблема?


Ответ

Проблема заключается в том, что данный селектор рассчитывает индекс элементов на одном уровне внутри контейнера.
То есть, сейчас блоки с классом block-tovar являются единственными элементами в контейнере. Правило говорит, поменять цвет у элемента с четным индексом.
Так как в контейнере один элемент, индекс у него 1 - нечетный, и селектор не применяется.
.block-tovar:nth-of-type(even) { background-color: yellow; }

Наполение
Наполение
я четный
Наполение
я четный

Комментариев нет:

Отправить комментарий