totn CSS

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

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):

CSS

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):

CSS

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.