CSS seleccionando un div después de un div con un div

Question

tengo este código en una página de inicio de sesión:

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

me gustaría para seleccionar div # navegación, pero sólo cuando se sigue div # encabezado que contiene div # homeBanner. La razón es que tengo un código similar en una página diferente:

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

no quiero afectar el estilo de navegación div # # cuando sigue cabecera div que contiene div # SiteBanner. ¿Esto tiene sentido?

¿Cómo selecciono div # navigation solo cuando sigue div # header que contiene div # homeBanner? Pensé que era:

div#header div#homeBanner > div#navigation 

... pero eso no parece funcionar.

Answer 1

El problema aquí es que está tratando de seleccionar el hermano de un elemento principal basado en el elemento secundario del elemento primario, lo que no es posible en CSS.

Su mejor opción es agregar una clase a #header (o incluso body) basada en esa información y luego hacer uso de esa clase.

Por ejemplo:

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

Con este selector (como han mencionado otros, utilizar + para los hermanos, no > para niños):

#header.home + #navigation 

Answer 2

Por favor, intente el siguiente código:

div#header + div#navigation 

Usa + para sibbling.