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