jQuery plugin to add a CSS class to last-child DOM elements

This has been bugging me for ages. IE < 9 does not support the CSS3 last-child pseudo class. I’ve created a _very_ simple jQuery plugin to add a CSS class “last-child” to the element that is the last child of a DOM element.

It performs this recursively, so it’ll apply the class to the last child of an element as well as to the last child of all it’s children…and so on and so forth.

It’ll perform this on each of the set of matched elements in a jQuery object. So you can have it traverse the whole, of your page by providing a jQuery object with the <body> element in it, or you can pick and choose DOM elements to apply the plugin to for efficiency. For instance, you might only need the "last-child" class to be applied to the last child of an unordered or ordered list:

    $('body').lastChild(); // Applies to all elements attached to the document.body
    $('ul, ol').lastChild(); // Applies to all elements in an unordered or ordered list

By default, the plugin applies the CSS class to a restricted set of DOM element types. You can specify the types of DOM elements to apply the class to by passing an options object to the function. In this way you can also specify the name of the CSS class that will be applied:

    $('ul, ol').lastChild({
        tags:['li'], // Only elements with the tag name 'li' will have the class applied to them
        cssClass:'ie-last-child' // The CSS class name will be 'ie-last-child'
    });

For super shorthand, you can simply pass a string to the lastChild function – which it presumes to be the CSS class you want to use:

    $('ul, ol').lastChild('ie-last-child');

You can download the plugin here.

Note, while I created this plugin to get around my IE problem, it is not built specifically for IE. If you only want IE to receive these classes, you’ll probably want to do something like:

    if($.browser.msie) {
        $('body').lastChild();
    }

…but obviously preferably using Modernizr:

    if($('.ie6, .ie7, .ie8').length) {
        $('body').lastChild();
    }

Enjoy!

560 thoughts on “jQuery plugin to add a CSS class to last-child DOM elements

  1. Hmm it appears like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to everything. Do you have any tips and hints for inexperienced blog writers? I’d really appreciate it.

  2. Hey there, You’ve done an excellent job. I will definitely digg it and personally recommend to my friends. I am sure they will be benefited from this web site.

  3. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something informative to read?

  4. Wow, tyis article is good, mmy younter sster iis analpyzing uch things,
    thus I aam going to llet know her. xnxx

  5. It is really a nice and useful piece of information. I am glad that you just shared this useful information with us. Please keep us up to date like this. Thank you for sharing.

  6. Thanks for your thoughts. One thing really noticed is that often banks as well as financial institutions have in mind the spending patterns of consumers and as well understand that plenty of people max out there their credit cards around the trips. They sensibly take advantage of this fact and commence flooding your own inbox in addition to snail-mail box together with hundreds of 0 APR credit card offers right after the holiday season finishes. Knowing that if you’re like 98 of all American community, you’ll rush at the chance to consolidate personal credit card debt and move balances to 0 rate credit cards.

  7. Your writing style is really unique compared to other folks I’ve read stuff from. Thanks for posting when you have the opportunity, Guess I will just book mark this site.

  8. Good site you have got here.. It’s hard to find good quality writing like yours nowadays. I really appreciate people like you! Take care!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>