Как реализовать такую логику?

Question

Имеется три блока html:

HTML:
    <div class="test"> 
      <div class="hide"></div>
      <div class="hide"></div>
    </div>

CSS:
.hide {
display: none;
}

Как сделать при дописании к классу "text" (родительскому блоку) класса "active" (<div class="test active"> ) изменить селектор класса "hide" на display: block;

P.S Интересуют любые, известные вам варианты: SASS, Less, сам CSS, JS.

Answer 1

function addActive() {
  document.querySelector('.test').classList.add('active');
}
function removeActive() {
  document.querySelector('.test').classList.remove('active');
}

.hide {
  display: none;
}

.test.active .hide {
  display: block;
}

<button onclick="addActive()">Add active</button>
<button onclick="removeActive()">Remove active</button>

<div class="test">
  <div class="hide">AAA</div>
  <div class="hide">BBB</div>
</div>

Answer 2

CSS:

.test.hide {
  display: none;
}

.test.active .hide {
  display: block;
}

SCSS:

.test{

    .hide {
       display: none;
    }

    &.active {
       .hide {
           display: block;
       }
    }
}

БЛОГ НА HUSL

Как реализовать такую логику?

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