Is there a way to select all children of one class recursively up to a different class

Question

For instance in the code

<div class="ofChildClass">
  <div class="other1">
    <div class="other2">
      <div class="ofStopClass">
        <div class="other3">
          <div class="other4">Text</div>
        </div>
      </div>
    </div>
    <div class="other5"></div>
    <div class="ofStopClass"></div>
    </div>
  </div>
</div>

The elements I would want to select are marked selected, and the elements I do not want selected are marked unselected.

<div class="ofChildClass" unselected>
  <div class="other1" selected>
    <div class="other2" selected>
      <div class="ofStopClass" unselected>
        <div class="other3" unselected>
          <div class="other4" unselected>Text</div>
        </div>
      </div>
    </div>
    <div class="other5" selected></div>
    <div class="ofStopClass" unselected></div>
    </div>
  </div>
</div>

Is it possible to make a selector, or multiple selectors that would select these elements without bruteforce.

To put the question into code is it possible to do this

.ofChildClass > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass)
...

without needing to repeat.

Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — BEN1JEN, Jun 28 '20 at 02:02
You could add in extra class name (same for all which need to be selected). Something uunique. And then call them by using that name. — Karan Kumar, Jun 28 '20 at 02:39

score 2 · Accepted Answer · answered Jun 28 '20 at 08:25

Not sure what kind of CSS you want to apply but this behavior can be defined using CSS variables like below:

:root {
  --c:initial; /* we start by initial (nothing defined, default value)*/
}

div {
  outline:4px solid;
  outline-color:var(--c);
  padding:10px;
  margin:5px;
}
div::before {
  content:attr(class);
}

/* we define the color here */
.ofChildClass > * {
  --c:red;
}

/* we reset the coloration again here*/
.ofStopClass {
  --c:initial;
}

<div class="ofChildClass">
  <div class="other1">
    <div class="other2">
      <div class="ofStopClass">
        <div class="other3">
          <div class="other4">Text</div>
        </div>
      </div>
    </div>
    <div class="other5"></div>
    <div class="ofStopClass"></div>
  </div>
</div>

Thank you so much, this works perfectly for what I wanted to do. — NNNN4, Jun 28 '20 at 21:38

score 0 · Answer 2 · answered Jun 28 '20 at 09:25

What I understood from your question is that you need to target divs that are marked selected only. You can do this by a code like this:

div[selected]{
    color: blue;
}
div{
    color: initial;
}

This code target all the divs that have a selected attribute given to them. As the color property is 'inherited', I had to revert color of all the divs to initial. This is just an example, otherwise div[selected] will select all the marked divs.

Is there a way to select all children of one class recursively up to a different class

2 Answers2