Muggy Ate Muggy Ate - 4 months ago 21
CSS Question

CSS select hierarchy segment

So I have an odd question. How do I make a selector that selects a segment of the hierarchy based on classes. for example i want something like

<node class="start-selection">
<node>
<node>content affected</node>
</node>

<node>
<node>content affected</node>
</node>

<node class="end-selection">
<node>
<node>content not affected</node>
</node>
</node>

<node>
<node>content affected</node>
</node>
</node>


I was thinking of something like this

.start-selection, .start-selection *:not(.end-selection, .end-selection *){
/*styling...*/
}


but that doesn't seem to work because you cant have compound selectors in the :not() pseudo class. Is the only way that I can accomplish this to use JavaScript? thanks.

Answer

It is impossible do do with pure CSS, but a little script should do the trick

var els = document.querySelectorAll(".end-selection *");
for (i = 0; i < els.length; i++){
  els[i].className += " end-selection-child";
}

And CSS:

.start-selection *:not(.end-selection):not(.end-selection-child){
   background:blue;
}

Demo: https://codecanister.com/Project/d547eed9/3/result