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

Grid-Structural

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 (tested using latest versions)

Desktop
Google Chrome
No
Mozilla Firefox
No
Safari
No
Opera Browser
No
Internet Explorer
No
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
No
Safari iOS
No
Opera Mobile
No
IE Mobile
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.