Click here to Skip to main content
Click here to Skip to main content

Tagged as

Adding a Style to the last li tag with jQuery

, 21 Nov 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Here in this tip, we will be able to find the last li tag and put a style with it.

Introduction

This is a simple problem not usually faced by everyone, but I had a situation where I faced a problem like this. It's about finding the last li tag from my HTML code which is inside a ul tag.

Using the Code

Here is the screenshot of my problem. The problem is that I needed to add a style to the last li tag to remove the underline to mean that it's the ending li. I searched a lot to find a solution for this problem and got a nice solution that I wanted to share.

Here is the screenshot of my problem:

Here goes the HTML code for my problem:

<ul id="LeftSide">
    <li>
        <h5>
            Categories
        </h5>
    </li>
    <li>
        <h5>
            Pierogi and Dumplings
        </h5>
    </li>
    <li>
        <h5>
            Sausages11
        </h5>
    </li>
    <li>
        <h5>
           Prepared Polish Dishes
        </h5>
    </li>
    <li>
        <h5>
           Test-Category
        </h5>
    </li>
    <li>
        <h5>
           Bakery2
        </h5>
    </li>
    <li>
        <h5>
           Pantry2
        </h5>
    </li>
     <li>
        <h5>
           Gift Baskets
        </h5>
    </li>
    <li>
        <h5>
           Test2
        </h5>
    </li>
</ul>  

The above is the HTML code. Here I would like to add a class for my last li tag. That is for my code, Test2 will be something different. We can add border, change font style, and do whatever we like to do.

Here is the solution:

<script type="text/javascript">
        $("#LeftSide li:last").addClass("border-last"); 
 </script> 

Here is the CSS style that I wanted to add with my last li tag to remove the bottom border:

.border-last 
{
    border-bottom: none !important;
} 

Here LeftSide is the ID of the ul tag and border-last is the CSS class we like to add with the last li tag. If we do this, the HTML code will be like this:

<ul id="LeftSide">
    <li>
        <h5>
            Categories
        </h5>
    </li>
    <li>
        <h5>
            Pierogi and Dumplings
        </h5>
    </li>
    <li>
        <h5>
            Sausages11
        </h5>
    </li>
    <li>
        <h5>
           Prepared Polish Dishes
        </h5>
    </li>
    <li>
        <h5>
           Test-Category
        </h5>
    </li>
    <li>
        <h5>
           Bakery2
        </h5>
    </li>
    <li>
        <h5>
           Pantry2
        </h5>
    </li>
     <li>
        <h5>
           Gift Baskets
        </h5>
    </li>
    // Here the Class is added with the last li
    <li class="border-last">
        <h5>
           Test2
        </h5>
    </li>
</ul>  

Here is the screenshot of my solution that removes the bottom border from the last li tag.

Happy coding!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

dpalash
Software Developer Desme Bangladesh
Bangladesh Bangladesh
I have completed my Undergraduate from Khulna University of Engineering in Computer Science & Engineering. Now i am working as a Software Engineer at desme-Bangladesh on ASP.NET. I really love this technology and like to build my career with this only.
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMonjurul Habib23-Nov-12 7:14 
GeneralRe: My vote of 5 Pinmemberdpalash23-Nov-12 20:07 
GeneralMy 5 PinmemberShahriar Iqbal Chowdhury22-Nov-12 18:49 
GeneralRe: My 5 Pinmemberdpalash22-Nov-12 19:49 
GeneralMy vote of 5 PinmemberMunir Hassan22-Nov-12 16:10 
GeneralRe: My vote of 5 Pinmemberdpalash22-Nov-12 19:49 
Suggestionuse instead css pseudo-class or adjacent selector PinmemberBen.12421-Nov-12 22:36 
GeneralRe: use instead css pseudo-class or adjacent selector Pinmemberdpalash22-Nov-12 0:56 
Thanks Ben.124 for your comment.
I have checked your solution and i think it is really great. but unfortunately i didn't know this solution. I really appreciate your solution.
 
Thanks
SuggestionUse CSS PinmemberRodkin Semen21-Nov-12 20:48 
GeneralRe: Use CSS Pinmemberdpalash22-Nov-12 0:59 
QuestionCSS PinmemberCaner Korkmaz21-Nov-12 5:47 
AnswerRe: CSS Pinmemberdpalash22-Nov-12 1:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 22 Nov 2012
Article Copyright 2012 by dpalash
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid