Question

I wonder if you could help out with the code below, I understand that color styles are inherited but for some reason im not getting the expected results. For example looking at the list beginning with ‘category 5’ this appears blue where the subcategories e-f appear green. I have set the style as ‘new_list’ which should be blue is correct but this is not inheriting down the list to the other ul items in subcategory E-H.
Cheers

<style>
.new_list   {color:blue;}

.all_list   {color:red;}

ul      {color:green;}
</style>



<ul class='all_list'>
    <li>Category1
        <ul class='sub_list'>
            <li>SubCategoryA</li>
            <li>SubCategoryB</li>
            <li>SubCategoryC</li>
            <li>SubCategoryD</li>
        </ul>
    </li>
    <li>Category2</li>
    <li>Category3</li>
    <li>Category4</li>

</ul>




<ul class='new_list'>
    <li>Category5
        <ul>
            <li>SubCategoryE</li>
            <li>SubCategoryF</li>
            <li>SubCategoryG</li>
            <li>SubCategoryH</li>
        </ul>
    </li>
    <li>Category6</li>
    <li>Category7</li>
    <li>Category8</li>

</ul>

Answer 1

you have contradicting rules applying to the same element:

you define ul:green and .new_list:blue. in the case of the main UL with class of .new_list the class rule takes precedence over the element rule since it is more specific. This is not the case when it comes to the child UL which doesn’t have a .new_list class and therefore the general ul:green definition takes precedence over the default inherited color and being itself passed by inheritance to the LI children.

In other words: Inheritance is an implicit default which is overridden by any explicit rule