html - div (内部に別の div がある場合) + div { }

Question

このようなことを行うルールを作成する方法:

.container .unit:first-child(div.box1.extra内にある場合) + .box2 { top: 50px;}

<div class="container">
   <div class="unit">
       <div class="box1 extra"><!-- content --></div>
   </div>

   <div class="unit">
       <div class="box1"><!-- content --></div>
   </div>

   <div class="box2"><!-- content --></div>                 
</div>

Answer 1

残念ながら、これは現在の CSS では不可能です。あなたが言及しているのは、CSS を使用した DOM トラバーサルです。とにかくルールを宣言するだけです。

.container .unit:first-child .box1.extra + .box2 { top: 50px;}

.box2要素が存在しない場合、何も変更されません。があるユニットについては.box2、ルールが適用されます。

編集:これ.box2は の子である場合にのみ機能することに注意してください.unit。.unitとが兄弟の場合.box2、これは残念ながら不可能です。