: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

See also