Check if element has any child, if not apply css
$('li').each(function(){
{
If(!$(this).children().length)
{
$(this).addClass("className");
}
});
Solution 1 :
Solution 2 :
ul>li:last-of-type
{
list-style-type: none;
}
Problem :
I have a large multilevel list like this:
li
{
list-style-type: none;
}<ul>
<li>level1 item</li>
<li>level1 item
<ul>
<li>level2 item</li>
<li>level2 item
<ul>
<li>level3 item</li>
</ul>
</li>
</ul>
</li>
<li>level1 item
<ul>
<li>level2 item</li>
<li>level2 item</li>
</ul>
</li>
</ul>And I need to make a special style for items on the last level only, i.e. if item hasn’t any subitems it must have a special style. I could use classes but the problem is that this list is very large and it’s not mine so I can’t somehow modify the list itself, I can only write the css for it (or write js code, but I don’t want to do it)
Comments
Comment posted by vadivel a
ul ul ul li{….} try this. can you make style for last list
Comment posted by Rob Moll
Which
Comment posted by Kriseev Mikhail
In my example lists with text “level3 item” and the last 2 items with text “level2 items”
Comment posted by Kriseev Mikhail
I didn’t want to use js but as I can’t see other ways to solve this problem, maybe I will use this code. Thanks
Comment posted by Kriseev Mikhail
Oh, I forgot that the code must check only if li tag has ul tag children. I made it myself in my code, but I think it should be added in the answer (just add ‘ul’ argument to the children() function)
Comment posted by as-if-i-code
li should have ul tag child? In that case adding ‘ul’ to children() function will give wrong result.
Comment posted by Kriseev Mikhail
Why? If I put some other tags in the item’s text (e.g. if I wrap text between