Zagnieżdzona struktura html - a selektory CSS

Question

Hej, 

czy jest możliwość stworzeniea selektora CSS dla stuktury: 
Klasa open będzie togglowana i teraz w momencie kiedy ona będzie chciał bym aby klasa
.top {top:50;}
natomiast w momencie kiedy klasy open by nie bylo klaska powinna miec .top {top:0;}
Da rade to zrobić jakoś za pomocą CSS ?

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

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

 

Answer 1

.open + * .top? Niemniej spróbowałbym uprościć strukturę zamiast kombinować w taką stronę.

Comments

Właśnie struktura jest uproszczona naprawde jak tylko sie da. Niesttey takie wymagania i ode mnie to nie zależy :)

Zaraz sprobuje Twojego selektora - jezeli bedzie dobry dam up za koment:)

---

niestety nie dziala https://jsfiddle.net/t98y5n11/

---

Hm, no tak, bo .open jest bardziej zagłębione. Obawiam się, że przy obecnym CSS-ie się tego nie da zrobić.

Answer 2

Można sprawdzić czy istnieje klasa open i w zależności od wyniku ustawić margines dla top;

var spr = $( ".open" )[0];
if(spr){
  $( ".top" ).addClass( "margin" );
}else{
  $( ".top" ).removeClass( "margin" );
}

Klase margin trzeba w tym przypadku ustawić w css

.margin{
  margin-top: 50px;
}

W twoim przykładzie domyślam się, że jest pozycjonowanie. Więc w css będzie top: 50px;

Comments

Nietstey mam możliwość edycji tylko CSS - czyli ingerencja JS nie da rady ;)