CSS selezione di un div dopo un div con un div

Question

Ho questo codice su una pagina di login:

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

mi piacerebbe selezionare div # navigazione, ma solo quando segue div # intestazione che contiene div # homeBanner. La ragione è che ho un codice simile su una pagina diversa:

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

Non voglio influenzare lo stile del div # navigazione quando segue div # intestazione che contiene div # SiteBanner. Ha senso ciò?

Come si seleziona la navigazione div # solo quando segue l'intestazione div # che contiene div # homeBanner? Ho pensato che fosse:

div#header div#homeBanner > div#navigation 

... ma non sembra funzionare.

Answer 1

Il problema è che si sta tentando di selezionare il fratello di un elemento genitore basato sul figlio del genitore, che non è possibile in CSS.

La soluzione migliore è aggiungere una classe a #header (o anche body) in base a tali informazioni quindi utilizzare tale classe.

Ad esempio:

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

Con questo selettore (come detto da altri, utilizzare + per i fratelli, non > per i bambini):

#header.home + #navigation 

Answer 2

Si prega di provare il seguente codice:

div#header + div#navigation 

Utilizzare il segno + per i sibblings.