:nth-col - CSS: Cascading Style Sheets 编辑

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

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 */
:nth-col(2n+1) {
  background-color: pink;
}

Result

Specifications

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.

See also

• :nth-child, :nth-last-of-type