How to apply CSS to nested Unordered Lists?

Question

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

your code works for me. what exactly are you expecting and what do you get? — Andy
– Andy, Commented Sep 9, 2011 at 14:34
Yep, I agree. .ul-deactive ul li selects any li which is a descendant (at any depth) of any ul which is a descendant (ditto) of an element with class ul-deactive — Chowlett
– Chowlett, Commented Sep 9, 2011 at 14:35
I'm able to apply the color but not to remove the margin and the change the style-type — GibboK
– GibboK, Commented Sep 9, 2011 at 14:35
the styles are inherited so make sure you reset them for example: ul li { margin: 100px; } to reset this you would add ul li ul li { margin: 0px; } — Xavier
– Xavier, Commented Sep 9, 2011 at 14:37

ThatMatthew · Accepted Answer · 2011-09-09 14:39:33Z

3

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

answered Sep 9, 2011 at 14:39

ThatMatthew

1,2489 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

checkenginelight · Accepted Answer · 2011-09-09 14:38:17Z

1

Try this css

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

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

answered Sep 9, 2011 at 14:38

checkenginelight

1,17410 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to apply CSS to nested Unordered Lists?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related