Select first nested child in list but not subchild

Question

I have a unordered list like:

<ul>
    <li>Element one
        <ul>
            <li><a>Element two</a>
                <ul>
                    <li><a>Element three</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Now if I try to select the <a>-element of "Element two". I would do it like the following:

ul ul li:first-child > a

This will select also the following nested <a> element. See this fiddle:

http://jsfiddle.net/38ksdpw3/

How can this be solved?

Answer 1

You probably need to add an identifier to the first <ul> element and then walk through the children tree by parent > child children selector as follows:

Example Here

ul.main > li > ul > li:first-child > a {
    background:red;
}

Answer 2

Actually you can not diffirintiate it in such structure. For both links you have ul ul li:first-child > a applied without the specific parent. So you should consider to use classes (at least for parenting) instead of tags.