CSS wybierając div po div z div

Question

Mam ten kod na stronie logowania:

<div id="header"> 
    <div id="homeBanner"> 
     ... 
    </div> 
</div> 
<div id="navigation"> 
    ... 
</div> 

Chciałbym wybrać div # nawigację, ale tylko wtedy, gdy wynika div # nagłówek, który zawiera div # homeBanner. Powodem jest to, mam podobny kod na inną stronę:

<div id="header"> 
    <div id="siteBanner"> 
     ... 
    </div> 
</div> 
<div id="navigation"> 
    ... 
</div> 

nie chcę wpływać na styl div # nawigacji gdy wynika div # nagłówek, który zawiera div # siteBanner. Czy to ma sens?

Jak wybrać opcję nawigacji div # tylko wtedy, gdy następuje nagłówek div # zawierający element div # homeBanner? Myślałem, że to:

div#header div#homeBanner > div#navigation 

... ale to nie działa.

Answer 1

Problem polega na tym, że próbujesz wybrać rodzeństwo elementu nadrzędnego w oparciu o dziecko rodzica, co nie jest możliwe w CSS.

Najlepiej jest dodać klasę do #header (lub nawet body) na podstawie tych informacji, a następnie korzystać z tej klasy.

Na przykład:

<div id="header" class="home"> 
    <div id="homeBanner"> 
     ... 
    </div> 
</div> 
<div id="navigation"> 
    ... 
</div> 

Z tego selektora (jak wspomniano przez innych, należy + dla rodzeństwa, nie > dla dzieci):

#header.home + #navigation 

Answer 2

Spróbuj następujący kod:

div#header + div#navigation 

Użyj znaku + dla dzieci.