Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

/* Selects every odd column in a table */ :nth-col(odd) {   background-color: pink; } 

:nth-col

Experimental: This is an experimental technologyCheck 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.

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

See also

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

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français Change language