CSS :nth-last-child selector
This CSS tutorial explains how to use the CSS selector called :nth-last-child with syntax and examples.
Description
The CSS :nth-last-child selector allows you to target an element that is the nth last child element within its parent.
Syntax
The syntax for the :active CSS selector is:
element:nth-last-child(value) { style_properties }
Parameters or Arguments
- element
- The nth last of that type of element within its parent.
- value
Determines which children to target. It can be one of the following:
Value Description even Targets the even children, starting from the last child and working backwards
tr:nth-last-child(even) { background: blue; }2n Also targets the even children. Same as using the even keyword
Formula would calculate as 2x0, 2x1, 2x2, 2x3, ... resulting in all even children being targeted (working backwards).
tr:nth-last-child(2n) { background: blue; }odd Targets the odd children, starting from the last child and working backwards
tr:nth-last-child(odd) { background: blue; }2n+1 Also targets the odd children. Same as using the odd keyword
Formula would calculate as (2x0)+1, (2x1)+1, (2x2)+1, (2x3)+1, ... resulting in all odd children being targeted (working backwards).
tr:nth-last-child(2n+1) { background: blue; }integer Targets a specific child as indicated by an integer value, where the last child is 1.
1 is the last child, 2 is the second last child, 3 is the third last child, and so on
tr:nth-last-child(1) { background: blue; }
tr:nth-last-child(2) { background: blue; }
tr:nth-last-child(3) { background: blue; }-an+b Targets children based on the formula -an + b
Formula would calculate as (-ax0)+b, (-ax1)+b, (-ax2)+b, (-ax3)+b, ...(working backwards)
tr:nth-last-child(-n+2) { background: blue; }- style_properties
- The CSS styles to apply to the nth last child element.
Note
- The :nth-last-child selector is a pseudo-class that allows you to target an element that is the nth last child element within its parent.
- See also :nth-child, :first-child, :last-child, and :only-child selectors.
Browser Compatibility
The CSS :nth-last-child selector has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer 9+ (IE 9+)
- Opera 9.5+
- Safari (WebKit)
Example
We will discuss the :nth-last-child selector below, exploring examples of how to use this selector in CSS to apply styling to the nth element.
Let's look at a CSS :nth-last-child example where we apply the :nth-last-child selector with an integer value.
The CSS would look like this:
tr:nth-last-child(1) { background: cyan; }
The HTML would look like this:
<table>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
<tr>
<td>techonthenet.com</td>
<td>Technical reference site</td>
</tr>
<tr>
<td>checkyourmath.com</td>
<td>Math calculation site</td>
</tr>
<tr>
<td>bigactivities.com</td>
<td>Kids activity site</td>
</tr>
</table>
The result would look like this (The :nth-last-child selector would style the <tr> tags as follows):
In this CSS :nth-last-child example, the :nth-last-child(1) would select and style the last <tr> in the table with a cyan background color. All other rows in the table will not be styled by the :nth-last-child selector.
Let's look at a CSS :nth-last-child example where we target multiple children.
The CSS would look like this:
tr:nth-last-child(-n+2) { background: yellow; }
The HTML would look like this:
<table>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
<tr>
<td>techonthenet.com</td>
<td>Technical reference site</td>
</tr>
<tr>
<td>checkyourmath.com</td>
<td>Math calculation site</td>
</tr>
<tr>
<td>bigactivities.com</td>
<td>Kids activity site</td>
</tr>
</table>
The result would look like this (The :nth-last-child selector would style the last two <tr> tags as follows):
In this CSS :nth-last-child example, the :nth-last_child(-n+2) would select and style the last two <tr> tags with a yellow background color. All other rows in the table will not be styled by the :nth-last-child selector.
Advertisements