My CSS rule for #sidebar has property list-style-type: none. I want to know why UL element doesn't want to inherit first property from #sidebar? I read on the net that list-style-type property is inherited so why it doesn't want to apply to UL then? On other hand it applied red color for text which is second property in #sidebar.

I can fix it many ways but could somebody explain me why it doesn't work and which from examples below is the best. I really want to understand CSS not just fix it without knowing why it didn't want to apply.

  ul {
            list-style-type: none;
        }

or

  li {
            list-style-type: none;
        }

or

 #sidebar ul {
            list-style-type: none;
            color:#F00;
    }

or

  #sidebar li {
            list-style-type: none;
            color:#F00;
        }

 #sidebar {
        list-style-type: none;
        color:#F00;
    }

   <body>
    <div id="sidebar">  

        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>

    </body>
    </html>

1 answer

1
point

you've set a style on the containing div - that won't be inherited as it isn't applicable to a div element. Inheritance for list style would apply to ul's within a ul id="sidebar" but you need to apply it by targetting the ul, not its container.

if you target the ul with #sidebar ul, then all ul's and li's inside that ul will inherit the list-style-type as I understand it.

Answered about 6 years ago by Tony Crockford