Сложный условный родственный элемент CSS> дочерний селектор> Можно ли это сделать?

В разметке ниже я ищу способ (возможно, используя селектор 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;}
6
задан Scott B 30 September 2010 в 17:07
поделиться