3 level ul li ul li liststyle css problem

Question

Hey guys,

i'am not going into this i've an unordered list but i don't get the style working. hope you can help me!

My html code:

<ul id="sitemap-list">
    <li><a href="#" onclick="">LEV0</a>
        <ul>
            <li><a href="#" onclick="">LEV11</a></li>
            <li><a href="#" onclick="">LEV1</a></li>
        </ul>
    </li>

    <li><a href="#" onclick="">LEV0</a>
         <ul>
            <li><a href="#" onclick="">LEV1</a>
                <ul>
                    <li><a href="#" onclick="">LEV2</a></li>
                    <li><a href="#" onclick="">LEV2</a></li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

And my CSS Code:

#sitemap-list li ul li a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: red;
    margin-left:  20px;
    margin-top: -5px;
}

#sitemap-list ul li ul li a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: #6e90a6;
    margin-left:  50px;
}

The problem is that the first css "block" styles all list items with an a-tag.

What do I do wrong?

thank you for your help :)

Answer 1

You did nothing wrong, that's just how CSS works.

the first rule styles all "a" elements which are descendants of li elements which are descendants of ul elements which are descendants of the element with id = sitemap-list.

Notice that your LEV2 list items meet that criteria as well as your LEV1 items.

You'll need to set any properties you want to "undo" on your nested list items explicitly.

Answer 2

The selector A B is the descendent selector and matches any B element that is a descendant of an A element, no matter if it’s a direct descentent (child node of an A element) or if it’s just a transitive descentend (e.g. child node of a child node of an A element).

If you want to select just the immediate child nodes, use the child selector A > B:

#sitemap-list > li > ul > li > a { /* … */ }
#sitemap-list > li > ul > li > ul > li > a { /* … */ }

But since the Internet Explorer doesn’t support the child selector, you will need to “reset” the properties that have been overwritten, e.g. the margin-top property:

#sitemap-list ul li ul li a {
    margin-top: 0;
}

Answer 3

hi, i'm currently facing to similar problem
and to all of them i'm having problem to style everithing ok for IE6, IE7, I8 and FF, Opera...
why every browser support something else?