Format li which contain links different from li which contains no links

Question

i have list like that:

<ul>
 <li><a...>...</a></li>
 <li>...</li>
</ul>

where both type of listelements are there multiple times in arbitrary order. Is there a way to format those li's differently? (different list-style-image) The only difference is that the one kind contains a link and the other one doesnt.

Answer 1

No, there is no way in CSS to specify a selector depending on the child elements.

You would have to add something to distinguish the li elements themselves, like a class on all li elements that contains links.

If you can use jQUery, you could add the class to the li elements that contains anchor tags:

$('li:has(a)').addClass('linkItem');

A non-jQuery solution could look like this:

var items = document.getElementsByTagName('LI');
for (var i=0; i<items.length; i++) {
  if (items[i].getElementsByTagName('A').length > 0) {
    items[i].className = 'linkItem';
  }
}