We would like to match the last 12 elements of a parent container. How to do this with CSS? To clarify, 12 is an arbitrary number. We would like to know how to match the last N elements of a parent container.
Syntax. The nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. :nth-last-child( <nth> [ of <complex-selector-list> ]? )
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
Definetely :nth-last-child(N)
li:nth-last-child(-n+12) {
/*your css declarations*/
}
This example selector will match the last 12 list items in any list, be it ordered or unordered:
http://reference.sitepoint.com/css/pseudoclass-nthlastchild
li:nth-last-child(-n+12) {
⋮ declarations
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With