19

Is there another way to get the last child of a div element other than using div:last-child, which does not work in IE8 at least?

TylerH
  • 20,799
  • 66
  • 75
  • 101
zsharp
  • 13,656
  • 29
  • 86
  • 152

8 Answers8

55

In jQuery it's easy:

$("div :last-child")

In pure CSS it can't be done.

Otherwise you're stuck with traversing the DOM in Javascript.

Also note the difference:

  • "div :last-child": every last child of a div; and
  • "div:last-child": every div that is a last child.
cletus
  • 616,129
  • 168
  • 910
  • 942
  • 5
    Nice answer, especially explaining the difference in selectors. – Jarrod Dixon Feb 13 '09 at 05:04
  • 2
    What do you mean by "In pure CSS it can't be done"? Do you mean "not every browser supports it" or something else? – Bobby Jack Oct 30 '09 at 17:40
  • 1
    :last-child is a CSS3 selector so there are only a few browsers that support it. Without it you can't select the last child (with only CSS). – cletus Oct 30 '09 at 18:07
  • 2
    The only problem with your answer is it does not address what to do when he has already selected the parent element, e.g. he is chaining: $(".mydiv").dostuff().(get the last child somehow).dochildstuff(). I believe two methods that work are .children().last() and probably .children(":last-child") – MikeJ Sep 02 '10 at 14:05
  • 2
    @MikeJ `$(".mydiv").doStuff().children().eq(-1).doChildStuff()` is probably the most elegant. – cletus Sep 02 '10 at 14:17
21

Unfortunately, I know not a way to do this in CSS without using :last-child, which (as you stated) fails in IE.

If you're talking about javascript, then it's possible using Node.lastChild:

var div = document.getElementById("mydiv");
var lastChild = div.lastChild;
Dan Lew
  • 85,990
  • 32
  • 182
  • 176
6

Use jQuery to find the appropriate elements: $("div:last-child").addClass("last-child");

Then use CSS to specify the presentation: div .last-child { /* your rules */ }

Mark Hurd
  • 13,010
  • 2
  • 27
  • 28
4

You can assign a class 'last' programmatically and select that one or use javascript. You might also have a shot by using some of Microsofts IE only css script thingies. But I do not know much about them, also do not consider that as an option.

TomHastjarjanto
  • 5,386
  • 1
  • 29
  • 41
  • 1
    +1, I agree. It's silly to depend on JavaScript to do this for you. Just be pragmatic and add a class="last" to the last element. It takes two seconds and will work everywhere. You can easily take it out and use the last-child CSS selector in a few years when it's widely supported. – Nicholas Piasecki Feb 13 '09 at 05:13
3

I do this with pure JavaScript by looping back through the nodes from the lastChild of the target element. If there is whitespace in your HTML, the lastChild may be a text node, so we loop until we find an element node (node type 1) or until we run out of nodes (previousSibling will return null).

For example, to find the last element in a page, I loop back from the lastChild of the body:

var targetElement = document.getElementsByTagName("body")[0],
    lastChildElement = targetElement.lastChild;

while (lastChildElement && lastChildElement.nodeType !== 1) {
    lastChildElement = lastChildElement.previousSibling;
}

if (lastChildElement) {
    // Do something
}

If there is no element inside the body, lastChildElement will exit this loop as null.

Jon Gibbins
  • 887
  • 7
  • 14
2

There are some cases in which you definitely don't want to use $("div:last-child") out of the box. One important thing to note is that this won't cater for changes to the DOM after that call - e.g. if a new element is added as the last child, you'll need to update things. It's not just a case of repeating the earlier call, either; you'll need to reverse the initial call on the previous last child.

If you're doing anything vaguely dynamic, be wary of this. the CSS pseudo-class is definitely the superior solution, it just has a horrible lack of support in IE. If your design can cope with the loss of last-child support in IE, and you're using progressive enrichment, I'd highly recommend the CSS approach over JS.

Bobby Jack
  • 15,689
  • 15
  • 65
  • 97
1

Fast Forward >> 4 years later (2013)
It is now possible with CSS v3 (CSS3) and is supported by all major browsers (with IE being >= version 9).
If you travel back in time with IE <= version 8, then jQuery version < 1.x will sort you out (just as the other answers have pointed out).
Read more http://www.w3schools.com/cssref/sel_last-child.asp

mrmoje
  • 3,714
  • 3
  • 20
  • 18
-1
var divs = $("id").getElementsByTagName('div');
var lastChild = divs[divs.length-1];
unigogo
  • 537
  • 4
  • 9