В разметке ниже я ищу способ (возможно, используя селектор css) стилизовать div содержимого по-разному в зависимости от наличия меню? Меню может присутствовать или не присутствовать в этом месте в разметке, и если оно есть, мне нужно добавить верхнее поле к содержимому.
Я считаю, что правила селектора братьев и сестер и потомков могут не заходить так далеко ...
«Когда меню присутствует как дочерний элемент заголовка, установите верхний край содержимого (родительский элемент которого является дочерним элементом заголовка) на 100 пикселей. В противном случае, установите его на ноль»
<div class="header">
<div class="sitetitle">site title</div>
<div class="tagline">tagline</div>
<div class="menu">menu</div>
</div>
<div class="main">
<div class="content">content goes here</div>
</div>
Если css разрешает группировку, я бы сделал это следующим образом ...
(.header ~ .menu) + (.main > .content) {margin-top:100px;}