Apply CSS rule to a group of elements between two other elements

Question

<div class="aaa">
  <blockquote>...</blockquote>
  <p>...</p>
  <div class="bbb">...</div>
  <div class="ccc">...</div>
</div>

Is there a way to apply display: none to everything between aaa and bbb ? That is, to <blockquote> and <p> . (The contents is not limited to blockquote and p . For example, it could be <div> or <pre> .)

Answer 1

You will need two rules:

 .aaa > * { display:none; }.aaa >.bbb, .aaa >.bbb ~ * { display:block; }

 <div class="aaa"> <blockquote>block</blockquote> <p>ppp</p> <div class="bbb">bbb</div> <div class="ccc">ccc</div> </div>

Answer 2

If you want to use JavaScript (for example to apply this change programmatically), you can get all the children of the element with class aaa and then iterate over them applying the style, stopping when you reach the one with class bbb .

let parent = document.querySelector('.aaa');

for (let child of parent.children) {
    if (child.classList.contains('bbb'))
        break;

    child.style.display = 'none';
}

Answer 3

 #xxx{ display:none; }

 <div class="aaa"> <div id='xxx'> <blockquote>.zzz..</blockquote> <p>.yyy..</p> </div> <div class="bbb">...</div> <div class="ccc">...</div> </div>