{"id":14236,"date":"2011-09-06T20:21:42","date_gmt":"2011-09-07T03:21:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14236"},"modified":"2017-05-03T06:28:31","modified_gmt":"2017-05-03T13:28:31","slug":"nth-last-of-type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-of-type\/","title":{"rendered":":nth-last-of-type"},"content":{"rendered":"
The Suppose we have an unordered list and wish to highlight the second-to-last item (in this exact example, the “Fourth Item”):<\/p>\n Rather than doing something like adding a class to the list item (e.g. As you can see, It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The \u201cn\u201d part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every second element with the formula To illustrate further, here are some examples of valid See the Pen CSS-Tricks: :nth-last-of-type<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n Luckily, you don’t always have to do the math yourself\u2014there are several :nth-last-of-type<\/code> selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec<\/a> as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling elements. It functions the same as
:nth-of-type<\/code><\/a> except it selects items starting at the bottom of the source order, not the top.<\/p>\n
<ul>\r\n <li>First Item<\/li>\r\n <li>Second Item<\/li>\r\n <li>Third Item<\/li>\r\n <li>Fourth Item<\/li>\r\n <li>Fifth Item<\/li>\r\n<\/ul><\/code><\/pre>\n
.highlight<\/code>) we can use
:nth-last-of-type<\/code>:<\/p>\n
li {\r\n background: slategrey;\r\n}\r\n\/* select the second-last item *\/\r\nli:nth-last-of-type(2) {\r\n background: lightslategrey;\r\n}<\/code><\/pre>\n
:nth-last-of-type<\/code> takes an argument: this can be a single integer, the keywords \u201ceven\u201d or \u201codd\u201d, or a formula. If an integer is specified only one element is selected \u2014 but the keywords or a formula will iterate through all the children of the parent element and select matching elements \u2014 similar to navigating items in an array in JavaScript. Keywords \u201ceven\u201d and \u201codd\u201d are straightforward (2, 4, 6, etc or 1, 3, 5 etc respectively). The formula is constructed using the syntax
an+b<\/code>, where:<\/p>\n
\n
2n<\/code>, which worked because every time an element was checked, \u201cn\u201d increased by one (2\u00d70, 2\u00d71, 2\u00d72, 2\u00d73, etc). If an element’s order matches the result of the equation, it gets selected (2, 4, 6, etc). For a more in-depth explanation of the math involved, please read this article<\/a>.<\/p>\n
:nth-last-of-type<\/code> selectors:<\/p>\n
:nth-last-of-type<\/code> testers and generators out there:<\/p>\n
\n
Points of Interest<\/h3>\n
\n
:nth-last-of-type<\/code> iterates through elements starting from the bottom of the source order. The only difference between it and
:nth-of-type<\/code><\/a> is that the latter iterates through elements starting from the bottom of the source order<\/i>.<\/li>\n
:nth-last-of-type<\/code> selector is very similar to
:nth-last-child<\/code> but with one critical difference:<\/b> it is more specific<\/a>. In our example above they would produce the same result because we are iterating over only
li<\/code> elements, but if we were iterating over a more complex group of siblings,
:nth-last-child<\/code> would try to match all siblings, not only siblings of the same element type. This reveals the power of
:nth-last-of-type<\/code>\u2014it targets a particular type of element in an arrangement with relation to similar siblings, not all siblings<\/i>.<\/li>\n<\/ul>\n
Related Properties<\/h3>\n
\n
Other Resources<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n Works<\/td>\n 3.2+<\/td>\n Works<\/td>\n 9.5+<\/td>\n 9+<\/td>\n Works<\/td>\n Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n