3

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.

2
  • Does this answer your question? Is there a CSS parent selector?
    – BEN1JEN
    Commented Jun 28, 2020 at 2:02
  • 1
    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. Commented Jun 28, 2020 at 2:39

2 Answers 2

2

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>

1
  • Thank you so much, this works perfectly for what I wanted to do.
    – NNNN4
    Commented Jun 28, 2020 at 21:38
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.