CODEWITHSUNDEEP
jqueryjquery-selectorshtml-lists
Mr A
Mr A

Reputation: 6768

How to find the li.last and add css using jquery

I have got an unorderlist generated programatically using code behind, The html markup is like:

<ul>
<li></li>
<li>
     <ul>
        <li></li>
        <li></li>
        <li></li>
        <li>last</li>
    </ul>
</li>
<li></li>
<li>
    <ul>
       <li></li>
       <li></li>
       <li></li>
       <li>last</li>
    </ul>
</li>
</ul>

The issue is ul li ul li a is styled as border-bottom: solid 1px white; and I want to set border-bottom: none for last sub li, Is it possible to find the last li using jquery and then modify the class, or is there any better way to acheive something like this, Thanks

Upvotes: 1

Views: 1526

Answers (4)

Manse
Manse

Reputation: 38147

$('ul li ul li:last-child a').css('border-bottom', 'none');

selects the last li and changes its CSS border-bottom value, this uses the :last-child selector, working example

in CSS3 you can do the following :

ul > li > ul > li:last-child a {
    border-bottom: none;
}

Working example using CSS3

Upvotes: 3

JKirchartz
JKirchartz

Reputation: 18022

Is this what you're looking for?

$("li:last-child a").css('border-bottom','none');

removing the bottom border from the last li's anchor tag?

Upvotes: 1

odupont
odupont

Reputation: 1976

In CSS (will not work for IE8)

ul ul li:last-child { border-bottom: none; }

Upvotes: 1

rjz
rjz

Reputation: 16510

Yes, but you might consider a pure CSS solution instead:

li:last-child { 
  border-bottom: none; 
}

Upvotes: 1

Related Questions