I'm trying to select an element in css only in the case when a parent element higher up the tree has a specific class that is added by user action.
<div class="special-mode">
<div>
...n divs...
<div>Element I want to select</div>
</div
</div>
I looked up how to select this in css and apart from using something like LESS or SASS, the only solution I found was to just grind it out and use a selector for each level of the tree, like
.class > * > * > * > * > div {}
Is this really the only way to do it? This syntax gets a bit out of control after a few tiers and just seems like a bad solution.
This is for a browser extension that modifies the style of existing webpages with css, so I'm limited in the tools I can use.