CSS выбор div после div с div

Question

У меня есть этот код на странице входа в систему:

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

Я бы хотел выбрать навигацию div #, но только если она следует за заголовком div #, который содержит div # homeBanner. Причина в том, что у меня похожий код на другой странице:

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

Я не хочу влиять на стиль навигации div #, когда он следует за заголовком div #, который содержит div # siteBanner. Имеет ли это смысл?

Как выбрать навигацию div #, только если она следует за заголовком div #, который содержит div # homeBanner? Я думал, что это было:

div#header div#homeBanner > div#navigation

... но это, похоже, не работает.

Answer 1

Проблема здесь в том, что вы пытаетесь выбрать родственный элемент родительского элемента на основе дочернего элемента родителя, что невозможно в CSS.

Лучше всего добавить класс к #header (или даже body) на основе этой информации, а затем использовать этот класс.

Например:

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

С этим селектором (как уже упоминалось, используйте + для братьев и сестер, а не > для детей):

#header.home + #navigation

Answer 2

Пожалуйста, попробуйте следующий код:

div#header + div#navigation

Используйте + для братьев и сестер.