Select the second last css element

Question

I already know about the last child. But is there a way to select a div:

<div id="container"> <div>a</div> <div>b</div> <div>SELECT THIS</div> <!-- THIS --> <div>c</div> </div> 

NOTE: without jQuery, only with CSS

Answer 1

In CSS3 you have:

 :nth-last-child(2) 

See: http://webdesign.about.com/od/styleproperties/p/nth-last-child.htm

nth-last-child Browser Support:

• Chrome 2
• Firefox 3.5
• Opera 9.5, 10
• Safari 3.1, 4
• Internet Explorer 9

Answer 2

Note: Sent this answer because the OP later in the comments indicated that it needs to select the last two items , not just the penultimate one.

---

Selector :nth-child CSS3 is actually more efficient than you ever imagined!

For example, this will select the last 2 elements of #container :

 #container :nth-last-child(-n+2) {} 

But this is only the beginning of a wonderful friendship.

• Good article on what you can do with :nth-child and friends .

• :nth-child Browser Support

•  #container :nth-last-child(-n+2) { background-color: cyan; } 

   <div id="container"> <div>a</div> <div>b</div> <div>SELECT THIS</div> <div>SELECT THIS</div> </div>