Geek asks and answers

How to match the last n children with CSS?

We would like to match the last 12 elements of the parent container. How to do it using CSS? To clarify, 12 is an arbitrary number. We would like to know how to match the last N elements of the parent container.

+5
source share
3 answers

Definitely : nth-last-child (N)

li:nth-last-child(-n+12) {
  /*your css declarations*/
}

This sample selector will match the last 12 elements of a list in any list, whether ordered or unordered:

+5
source

http://reference.sitepoint.com/css/pseudoclass-nthlastchild

li:nth-last-child(-n+12) {
  ⋮ declarations
}
+2
source

You want a :nth-last-child pseudo-class (or :nth-last-of-typefor type checking). After that, you can use ~to select all subsequent siblings:

.container > *:nth-last-child(13) ~ * { }

http://jsbin.com/uhuzer/1/edit

+1
source

More articles:


All Articles