jquery - Selecting a list item that doesn't have a sublist with CSS -

jquery - Selecting a list item that doesn't have a sublist with CSS -

i wondering if possible select list item not contain ul's or ol's pure css. note list item contain anchor, allowed. css3 can used well. know how jquery, i'd utilize css(3).

first of all, there (currently) no selector in css, check if element contains elment or if doesn't. (i played bit around :not() didn't work.)

but there trick this, :only-child selector. if can there <a> tag in list , no other element <ul>, can this:

html

<ul class="list"> <li><a href="#">test</a></li> <li> <a href="#">test</a> <ul> <li>test2</li> </ul> </li> </ul>

css

.list > li > a:only-child { color: red; }

so select <a> tags kid of parent tag.

this might not perfect solution, work if have construction html code.

have @ jsfiddle see solution: http://jsfiddle.net/2lxaah61/

jquery css list css-selectors