隣の子供を選択する...どのように？ ... CSSでの隣接する子要素を選択するために、これを するかどうかは本当にわからないようにしよう

Question

は、私は複数のレベルを持つメニューがあることを言いたいHTML構造

<ul> 
    <li> 
     <a href="#"> 
      <span class="icon"></span> 
      First level 
     </a> 
     <ul> 
      <li> 
       <a href="#">Second level</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

です。 LI内に既存のULが存在する場合、ドロップダウン/アイコンを展開する必要があります。隣接するセレクタを使用すると、このレベルに拡張する子供がいるかどうかを判断できます。これが動作すると思ったものですが、didn 「T：

ul li a ~ ul .icon { 
    // doesnt work 
} 
ul li a .icon ~ ul { 
    // doesnt work 
} 

ul li a ~ ul { 
    // works 
} 

をこの作品が、私は.iconをターゲットにする必要がある乾杯、ドム

Answer 1

あなたの質問にはコメントができます。メニューのHTMLの生成方法を制御できる場合は、サブメニューを持つ各li要素に余分なクラスを追加することで回避できます。このように：

<ul> 
    <li class="has-submenu"> 
     <a href="#"> 
      <span class="icon"></span> 
      First level 
     </a> 
     <ul> 
      <li> 
       <a href="#">Second level</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

は、その後、あなたは、このようにセレクタを使用することができます。

.has-submenu .icon { 
    /* Do your stuff here */ 
} 

Answer 2

ULは、Liの子ではなく、アンカーです。だからul li ul。
兄弟として選択したい場合はul li a + ul