Не перебиваются стили

Question

Подскажите пожалуйста, добавил обработчик события на кнопку:

    const modalTrigger = document.querySelector('[data-modal]');
    const modal = document.querySelector('.modal');
    const modalCloseBtn = document.querySelector('[data-close]');
    
    modalTrigger.addEventListener('click',  () => {
        modal.classList.add('show');
        modal.classList.remove('hide');
    });

    modalCloseBtn.addEventListener('click',  () => {
        modal.classList.add('hide');
        modal.classList.remove('show');
    });

Есть вот такие стили:

.show {
    display: block;
}
.hide {
    display: none;
}

Как сделать чтобы добавляемый класс, перебивал стили полученные до него?

Answer 1

Нужно сделать свойство более специфичным. Например так:

.modal.show {
    display: block;
}
.modal.hide {
    display: none;
}

Или описывать классы .show и .hide ниже, чем описан .modal в документе CSS.

Или задавать свойство display элементу:

modal.style.display = 'none';
modal.style.display = 'block';

БЛОГ НА HUSL

Не перебиваются стили

Ответы (1 шт):