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

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

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

Formal syntax

:nth-col

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

No compatibility data found for css.selectors.nth-col.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.