:nth-last-col()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The :nth-last-col() CSS pseudo-class is designed for tables and grids. It accepts the An+B notation such as used with the :nth-child selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid.

css

/* Selects every odd column in a table */
:nth-last-col(odd) {
  background-color: pink;
}

Syntax

The nth-last-col() pseudo-class is specified with a single argument, which represents the pattern for matching elements. It uses :nth-last-col(An+B) syntax.

See :nth-child for a more detailed explanation of its syntax.

css

:nth-last-col(An + B) {
  /* ... */
}

Examples

Basic example

HTML

html

<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

CSS

css

td {
  border: 1px solid #ccc;
  padding: 0.2em;
}

/* Odd columns starting with the final column of the table */
:nth-last-col(2n + 1) {
  background-color: pink;
}

Result

Specifications

No specification found

No specification data found for css.selectors.nth-last-col.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

BCD tables only load in the browser

See also