Is there another way to get the last child of a div element other than using p:last-child which does not work in IE at least?
+2
A:
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.
Tomh
2009-02-12 21:54:21
+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
2009-02-13 05:13:32
+17
A:
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
2009-02-12 21:54:36
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
2009-10-30 17:40:13
: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
2009-10-30 18:07:46
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
2010-09-02 14:05:56
@MikeJ `$(".mydiv").doStuff().children().eq(-1).doChildStuff()` is probably the most elegant.
cletus
2010-09-02 14:17:58
+6
A:
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;
Daniel Lew
2009-02-12 21:55:22
+1
A:
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
2009-02-13 04:46:48
A:
var divs = $("id").getElementsByTagName('div');
var lastChild = divs[divs.length-1];
unigogo
2009-02-13 05:03:16
A:
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
2009-10-30 17:38:43