Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to match the last n children with CSS?

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.

like image 558
Crashalot Avatar asked Sep 14 '12 18:09

Crashalot


People also ask

How do I get the last 4 child in CSS?

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> ]? )

How do I select all nth child in CSS?

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.


2 Answers

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:

like image 96
Dipak Avatar answered Sep 30 '22 13:09

Dipak


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

li:nth-last-child(-n+12) {
  ⋮ declarations
}
like image 41
Alex G Avatar answered Sep 30 '22 13:09

Alex G