Riccardo Riccardo - 6 months ago 19
CSS Question

Nested lists CSS overriding styling (#id + class)

A particular nested list, with parent

div id
and list items with different class... I can't make it to assign correctly background colors.

For example:

<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>




What CSS code would you use to change background colour of each li/a item belonging to class
current_page_ancestor
,
page_item
and
current_page_item
(each one should have different colors)

Answer

For first a you can use > or direct-child selector and for others you can just select with parentClass->a

.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>