: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