The li format, which contains links other than li, which does not contain links

Question

I have a list:

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

where both types of list items are several times in random order. Is there a way to format these words differently? (different style in list style). The only difference is that one view contains a link and the other does not.

Answer 1

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

You would need to add something to distinguish the elements themselves li, as a class in all lielements containing links.

If you can use jquery, you can add the class to elements licontaining anchor tags:

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

, jQuery, :

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 2

. , . , .

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

Li <a> .

Answer 3

CSS, Javascript . jQuery:

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

li, . , list-style-image ul, li, (?) , , li.

Answer 4

,

<p></p> :

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

2 :

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 do perss css / html.

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

Also, I might have missed out on the fact that you wanted to apply the list-style-image style, then that would not work.

Answer 5

Classes are for this purpose intended. In HTML:

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

and in CSS

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