How to apply CSS to nested Unordered Lists?


Tags: html,css

Problem :

I have some nested unordered list, I need to apply my class ul-deactive to every element inside that div with tag <ul> <li> at any depth.

With my code I'm not able to make it work. Any idea what I'm doing wrong and how to fix it?

<div class="ul-deactive">
<ul>
    <li>a
        <ul>
            <li>a-1 </li>
            <li>a-2 </li>
        </ul>
    </li>
    <li>b
        <ul>
            <li>b-1 </li>
            <li>b-2 </li>
        </ul>
    </li>
</ul>


.ul-deactive ul li
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    color:Fuchsia;
}


Solution :

The properties list-style-type, margin, and padding should be applied to the ul, not the li, like so:

.ul-deactive ul li
{
     color:Fuchsia;
} 

.ul-deactive ul
{
     list-style-type: none;
     padding: 0px;
     margin: 0px;
}

    CSS Howto..

    How to re-size an image inserted via tag?

    How to hide the first element on the page with particular css class? [duplicate]

    How to create a border gap illusion

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    HTML/CSS: How to use another font for list-item Bullets

    How can I use AngularJS directive to apply css style for a string?

    How to change decoration of a local HTML file to show it on the WebView in Android

    How to get css class name using Selenium?

    how to do a fade in/out while moving down css animation

    how to get background image present in other folder using css?

    How to properly align two elements in CSS

    How to make CSS URL background images show up in localhost?

    How to add border to circular image on hover? css or jquery

    how to center two div in xs

    Pure CSS3 show/hide full height div with transition

    How to create a div in the same size as the contained image. Both should be responsive

    How to add animated gif to an image sprite?

    How do I make elements flow horizontally instead of vertically?

    Show tooltip content when its hovers

    how can i style processing.js element?

    how to make a list float left or not according to the size of the browser?

    How to set style for a column in an extjs 4 grid [closed]

    How to force a div to scale at 100% width of the current windows Browser

    How to toggle the contents of span when clicked?

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to do make CSS Toggle like this? [closed]

    how to build a triangular slider? [closed]

    How to make css background-image a fluid image work in IE

    How to delete Bullets from an Unordered List using CSS?

    CSS border - how to populate content inside div with border