CSS advance selector - is posible?

Question

I have question about CSS selectors. I have below structure - I can only modiffy CSS - I don't have access to modify html or JS.

 <div class="wrapper">
  <div>
    <div>
      <div class="open">

      </div>
    </div>
  </div>
  <div>
    <div class="top">

    </div>
  </div>
</div>

Class open will be toggled. Can I make selector when:

div in 4 line has open - div with class top => .top {top:50px}
div in 4 line not has open - div with class top => .top{top:0px;}

This is possible?

Will become possible if you could add `open` class to the outermost parent inside `.wrapper`. — Mohammad Usman, Jan 04 '18 at 11:17
@MohammadUsman - you have right but unfortunatly I can edit only CSS. — JJanek, Jan 04 '18 at 11:22
In that case, not possible in pure CSS (until CSS manages to give us a workable parent selector). — delinear, Jan 04 '18 at 11:30
By definition, CSS cascades downward, there is no way to move back up the tree to find a parent element's siblings, which would be required for this situation. I suggest you rethink your process, could you perhaps apply a class to the `wrapper` which affects both the child classes? — DBS, Jan 04 '18 at 11:36

score -1 · Answer 1 · answered Jan 04 '18 at 11:25

-1

Try this:

.wrapper div:not(.open){
    ...
}

You will need to adjust it to the get the correct DIV, because this will affect all of them inside .wrapper

In your case it looks like you need something like:

.wrapper > div > div > div:not(...){...}

However, that is a bad practice.

You can read some more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

answered Jan 04 '18 at 11:25

Martin Chaov

824
7
17

This is not what I need : ) – JJanek Jan 04 '18 at 11:42
Sorry mate, this is what I understood from the question. – Martin Chaov Jan 04 '18 at 13:10

CSS advance selector - is posible?

1 Answers1