3 level ul li ul li liststyle css problem

Question

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

The selector AB 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 (eg 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, eg the margin-top property:

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