Grid-Structural :column(selector) / :nth-column(n) / :nth-last-column(n)

The grid-structural pseudo-classes apply to structural grids, such as tables.

The :column() pseudo-class matches any cell belonging to a column, in a grid or table, represented by the passed argument (selector).

The :nth-column() pseudo-class matches any cell, in a grid or table, belonging to the nth column in a grid or table.

The :nth-last-column() pseudo-class represents any cell belonging to the nth column in a grid or table, counting from the last one.

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop no no no no no no
Mobile no no no no no no


E:column(selector) { /* Style properties */ }

E:nth-column(an + b) { /* Style properties */ }

E:nth-last-column(an + b) { /* Style properties */ }


/* In this example, all columns with the class selected will have a yellow background. */

:column(.selected) {
background: yellow;

/* This example sets a blue background to every second column. */

:nth-column(2n) {
background: blue;

/* In the following example, every third column, counting from the last one, with an offset of 1, will have a red background. */

:nth-last-column(3n+1) {
background: red;

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.