ネストされたリストCSSオーバーライドスタイリング（#id +クラス）

Question

特定のネストされたリスト、親div idを持ち、異なるクラスのリスト項目...正しく背景色を割り当てることはできません。例えば

：

<div id="sidebar" class="widget-area"> 
<div class="theiaStickySidebar"> 
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu"> 
     <ul class="parent-sidebar-menu"> 
      <li class="current_page_ancestor"> 
       <a href="http://somesite/about-us/">About Us</a> 
       <ul class="child-sidebar-menu"> 
        <li class="page_item"> 
         <a href="http://somesite/about-us/welcome/">Welcome</a> 
        </li> 
        <li class="page_item current_page_item"> 
         <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </aside> 
</div> 

何CSSコードは、各リチウムの背景色を変更するために使用する/クラスcurrent_page_ancestor、page_itemとcurrent_page_itemに属するアイテム（それぞれが異なる色を持っている必要があります）

Answer 1

最初にaの場合は、>またはダイレクトチャイルドセレクタを使用できます。その他の場合はparentClass - >で選択できます

.current_page_ancestor > a { 
 
    color: black; 
 
} 
 
.page_item a { 
 
    color: green; 
 
} 
 
.page_item.current_page_item a { 
 
    color: red; 
 
}

<div id="sidebar" class="widget-area"> 
 
    <div class="theiaStickySidebar"> 
 
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu"> 
 
     <ul class="parent-sidebar-menu"> 
 
     <li class="current_page_ancestor"> 
 
      <a href="http://somesite/about-us/">About Us</a> 
 
      <ul class="child-sidebar-menu"> 
 
      <li class="page_item"> 
 
       <a href="http://somesite/about-us/welcome/">Welcome</a> 
 
      </li> 
 
      <li class="page_item current_page_item"> 
 
       <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </aside> 
 
    </div>

Answer 2

ul { 
 
    /* reset lists */ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
} 
 

 

 

 
/* specific styles */ 
 

 
.page_item a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    border-bottom: 1px solid white; 
 
    color: white; 
 
    background-color: #333; 
 
} 
 
.page_item a:hover, 
 
.page_item.current_page_item a{ 
 
    background-color: #666; 
 
} 
 

 
.parent-sidebar-menu { 
 
    width: 200px; 
 
} 
 

 
.current_page_ancestor > a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: green; 
 
    background-color: #fff; 
 
    text-align: right; 
 
} 
 

 
.current_page_ancestor > a:before { 
 
    content: "Back to >> "; 
 
    font-size: 14px; 
 
    color: #000; 
 
    margin-right: 10px; 
 
}

<div id="sidebar" class="widget-area"> 
 
    <div class="theiaStickySidebar"> 
 
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu"> 
 
     <ul class="parent-sidebar-menu"> 
 
     <li class="current_page_ancestor"> 
 
      <a href="http://somesite/about-us/">About Us</a> 
 
      <ul class="child-sidebar-menu"> 
 
      <li class="page_item"> 
 
       <a href="http://somesite/about-us/welcome/">Welcome</a> 
 
      </li> 
 
      <li class="page_item current_page_item"> 
 
       <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </aside> 
 
    </div> 
 
</div> <!-- #sidebar -->

これは私が同じことを行うために同様のものを使用し、状態に応じて変更しています代わりに別の何かをする各クラスを使用してのことで若干異なっています変化する。祖先ページは、子サイドバーメニューとは異なる方法で処理されます。お役に立てれば。