Nested lists CSS overriding styling (#id + class) - css

Question

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">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</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 1

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">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</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">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
</div> <!-- #sidebar -->
This is slightly different in that instead of using each class to do something different I am using similar things to do the same thing and changing based on state change. The ancestor page is treaded differently than the child sidebar menu. Hope this helps.