0

введите сюда описание изображения

У меня есть блок .tarif-plan__items, в нем содержится 2 блока: .tarif-plan__months и tarif-plan__year.

При нажатии на Month или Years у меня меняются классы у детей .tarif-plan__items. Класс .hide только добавляет стиль display: none; Однако блок с таким классом не скрывается (внизу картинки), это можно увидеть на картинке. Никаких !important я не использую, в js коде добавляю только классы, никаких инлайновых стилей.

В чем может быть проблема?

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 10 дек 2021 в 16:36
  • У вас же написано, что действует правило класса tarif-plan__months - display: grid. Если вы указываете правила только через селектор одного класса везде, то значит правила для класса hide описаны выше и по правилам каскадности они переписываются последующими равноценными по специфичности или более специфичными.
    – Leonid
    10 дек 2021 в 17:03

1 ответ 1

1

Советую прочитать про приоритеты стилей CSS

В целом, класс .hide просто не имеет достаточного веса чтобы перебить основной стиль, CSS не выбирает его приоритетным. Варианты решений:

  • Сделать его с ключевым словом !important:

     .hide {
         display: none !important;
     }
    
  • Сделать его более специфичным, к примеру

     .tarif-plan__items .hide {
         display: none;
     }
    
  • Поменять расположение стилей, подробнее описано в первой ссылке

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.