Select last children of tag

Question

I was working on a project but I could not find a way to select last children of dashboard

<div class="dashboard">
<div class="grid_6 alpha">
<div class="grid_6 omega">
<div class="grid_6 alpha">
<div class="grid_6 omega">
<div class="grid_6 alpha">
<div class="grid_6 omega"> //i wanna select this
<div class="clear"></div>
</div>

i tried

.dashboard:last-child
.omega:last-child

Look at this SO search result : http://stackoverflow.com/search?q=css+last+element and your answer is here : stackoverflow.com/questions/10415016/is-it-possible-to-target-the-very-last-list-element-in-css/10415207#10415066 and google : https://www.google.ca/#gs_rn=21&gs_ri=psy-ab&cp=19&gs_id=cn&xhr=t&q=css+selector+last+element — Milche Patern, Jul 23 '13 at 12:27
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-last-child — Ravi Patel, Jul 23 '13 at 12:30
Please, consider to avoid using empty markup for styling purpose. — Fabrizio Calderan, Jul 23 '13 at 12:37
Using an empty div as your clearfix is archaic and unnecessary. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — cimmanon, Jul 23 '13 at 13:03

score 6 · Accepted Answer · answered Jul 23 '13 at 12:26

6

The last child is .clear, not .omega, so .omega:last-child won't work.

If that .clear will always be there, use .omega:nth-last-child(2) instead.

If you cannot guarantee that, then it's not going to be feasible without some scripting.

answered Jul 23 '13 at 12:26

BoltClock

700,868
160
1,392
1,356

hunterc · Answer 2 · 2013-07-23T12:47:52.717

0

I guess you could use the nth-child() selector. Link: nth-child()

EDIT:Can't spell.

edited Jul 23 '13 at 12:47

answered Jul 23 '13 at 12:28

hunterc

1,957
2
15
18

It's spelled nth-child, not n-thChild. – BoltClock Jul 23 '13 at 12:31

score 0 · Answer 3 · answered Jul 23 '13 at 13:14

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon,</span>
<span>Sam</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph,</span>
<span>David</span>
</div>

<script>
$("div span:last-child")
.css({color:"red", fontSize:"80%"})
.hover(function () {
      $(this).addClass("solast");
    }, function () {
      $(this).removeClass("solast");
    });
</script>

Select last children of tag

3 Answers3