применить css к бабушке и деду, когда слайд активен

Question

У меня есть карусель на моей домашней странице . Когда появляется третья карусель, кнопки карусели div class="rotator-controls" опускаются вниз из-за места для съемки изображения. Моя цель здесь - сохранить этот div такой же высоты, как и остальные 4. Это означает, что когда <span> (индекс 2) внука div <div class="rotator-pagination"> активен, я применяю правильный css к <div class="rotator-controls"> (например,внизу: 60px). Поскольку каруселью является цикл jQuery 2, когда диапазон активен, он имеет класс cycle-pager-active.

Я пытался использовать domcontentloaded. т.е.

document.addEventListener("DOMContentLoaded", function() {
var span = document.querySelector("#homepage-rotator > div.banner.cycle-slide.cycle-slide-active > div > div.banner-content-area > div.rotator-controls > div.rotator-pagination").children[2];

if (jQuery(span).hasClass("cycle-pager-active")){
var grandPDiv = document.querySelector("div.rotator-controls");
grandPDiv.style.bottom = "-60px";
}
});

Это не работает. Но если я сделаю это в консоли и подожду, пока третья карусель станет активной, то с помощью jQuery(span).hasClass("cycle-pager-active") вернется true. Как применить css (к его элементу grandparent) только при активном элементе span?

Answer 1

Попробуйте это

.banner-content-area {
    min-height: 440px;
}

, если не работает, тогда добавьте min-height: 440px! Important;

Answer 2

Это прекрасно работает:

.banner-content-area {
    min-height: 440px;
}