:nth-col()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The :nth-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. The values odd and even are also valid.
css
/* Selects every odd column in a table */
:nth-col(odd) {
background-color: pink;
}
Syntax
The nth-col()
pseudo-class is specified with a single argument, which represents the pattern for matching elements. It uses :nth-col(An+B)
syntax.
See :nth-child
for a more detailed explanation of its syntax.
css
:nth-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 */
:nth-col(2n + 1) {
background-color: pink;
}
Result
Specifications
No specification found
No specification data found for css.selectors.nth-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