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

sure. If you give each different li a class you can do it simple. Or you can always do this if you can't use classes.

ul li
{
    styles....
}
ul li a 
{ 
    styles.... 
}

The styles in the first class will apply to all li elements and styles in the second class will apply to the < a > tags respectively.

Answer 2

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';
  }
}

Answer 3

You can't do this with CSS alone, you could use Javascript to accomplish this. Here's an example using jQuery:

$('ul li a').each(function() {
  $(this).parent().css('list-style-image', 'url("/path/image.gif")');
});

This will set the style for the li tags, not the a tags. Technically, the list-style-image property is supposed to be set for ul tags, not li, but most (all?) browsers handle it the way you would expect when you style the li tags individually.

Answer 4

Hello there

I would add a <p></p> tag like this:

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

And then apply 2 different styles like this:

ul a {display:block; padding:3em; background: #ccc;}
ul p {display:block; padding:3em; background: #aaa;}

I would not recommend using javascript for this, some people block javascript ect. but it depends. I would perfer css/html.

Edit: For some reason you can write <p></p> without making it code - Fixed

Also I might have overlooked that you wanted to apply list-style-image, then this will not work.

Answer 5

This is what classes are for. In HTML:

<ul>
 <li class="linked"><a...>...</a></li>
 <li>...</li>
</ul>

and in CSS

ul li {...}
ul li.linked {...}