177

I already know of :last-child. But is there a way to select the 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

4
  • Surely there's some logic as to why the second-last child is significant?
    – David Tang
    Mar 24, 2011 at 12:02
  • yes i need to select both last and second-last for applying some styles
    – dynamic
    Mar 24, 2011 at 12:03
  • why can't you just put a class on the 2nd last div
    – Daveo
    Mar 24, 2011 at 12:06
  • 4
    "why can't you just put a class on the 2nd last div": Perhaps if you get to style content that's being generated, in which you don't have (easy) access to add a class to the second last item?
    – Henrik
    Feb 10, 2014 at 17:19

3 Answers 3

367

In CSS3 you have:

:nth-last-child(2)

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nth-last-child Browser Support:

  • Chrome 2
  • Firefox 3.5
  • Opera 9.5, 10
  • Safari 3.1, 4
  • Internet Explorer 9
2
  • 1
    solution in css: #container > :nth-last-child(2) {background: red;} Please check this codepen to see it in live : codepen.io/marc_dahan/pen/JyxObz
    – marcdahan
    Sep 1, 2017 at 15:34
  • Now that we don't need to support older IE, this answer will work perfectly. Honestly, if people are still using IE 8 and below, they don't deserve to have pretty things.
    – Stender
    Jan 4, 2018 at 13:47
79

Note: Posted this answer because OP later stated in comments that they need to select the last two elements, not just the second to last one.


The :nth-child CSS3 selector is in fact more capable than you ever imagined!

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

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

But this is just the beginning of a beautiful friendship.

#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>

1
  • Nice one, my answer only selects the last-child minus 1. Didn't know about this. +'d
    – user657496
    Mar 24, 2011 at 12:15
0

This adds a comma after each LI, an ", or" after the second to the last LI, and a period to the last LI using pure CSS with nth-last-child()::after.

To affect just the second to the last LI delete the last CSS entry and set the second CSS entry's (n+3) content to empty ('').

`<style>
    /* Append endings to LIs.
       Append "," to all but the last 2 LIs.
       Append ", or" to the 2nd to the last LI. 
       Append "." to the last LI. */
    article li:nth-last-child(n + 2)::after {
        /* All but the last row. */
        content: ', or';
    }
    article li:nth-last-child(n + 3)::after {
        /* Overwrite all but the last two rows. */
        content: ',';
     }
     article li:nth-last-child(1)::after {
        content: '.';
     }
</style>
<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
</ul>`

Yields

  • Line 1,
  • Line 2,
  • Line 3, or
  • Line 4.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.