Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select first nested child in list but not subchilds

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?

like image 712
dude Avatar asked Sep 17 '14 09:09

dude


2 Answers

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;
}
like image 115
Hashem Qolami Avatar answered Sep 26 '22 07:09

Hashem Qolami


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.

like image 27
YuS Avatar answered Sep 25 '22 07:09

YuS