Web/CSS/ nth-last-col

This is an experimental technologyCheck 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.

/* 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.

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

Formal syntax

Syntax not found in DB!

Examples

Basic example

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

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

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

Result

Specifications

Specification	Status	Comment
Selectors Level 4The definition of ':nth-last-col' in that specification.	Working Draft	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

No compatibility data found. Please contribute data for "css.selectors.nth-last-col" (depth: 1) to the MDN compatibility data repository.