При добавлении класса не применяются стили | html, css
У меня есть блок .tarif-plan__items, в нем содержится 2 блока: .tarif-plan__months и tarif-plan__year.
При нажатии на Month или Years у меня меняются классы у детей .tarif-plan__items. Класс .hide только добавляет стиль display: none; Однако блок с таким классом не скрывается (внизу картинки), это можно увидеть на картинке. Никаких !important я не использую, в js коде добавляю только классы, никаких инлайновых стилей.
В чем может быть проблема?
Ответы (1 шт):
Советую прочитать про приоритеты стилей CSS
В целом, класс .hide просто не имеет достаточного веса чтобы перебить основной стиль, CSS не выбирает его приоритетным. Варианты решений:
Сделать его с ключевым словом !important:
.hide { display: none !important; }Сделать его более специфичным, к примеру
.tarif-plan__items .hide { display: none; }Поменять расположение стилей, подробнее описано в первой ссылке