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

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

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

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

:nth-last-column(n)
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

Syntax

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

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

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

Example

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