CSS Selector Level 4 » Grid-Structural pseudo-class

The grid-structural pseudo-class is made for structural grids like tables. The :nth-col() pseudo-class represents a cell belonging to the column in a grid structure that has nth-columns before it, while :nth-last-col() will count from after that column.

Syntax

Copy
:nth-col(An+B) {
    /* declarations */
}

:nth-last-col(An+B) {
    /* declarations */
}

Example

Copy
:nth-col(2n+1) {
    background-color: gray;
}

:nth-last-col(3n+1) {
    background-color: green;
}

:nth-col() will set a gray background-color to each second column counting from the first column and :nth-last-col() will add a green background-color to every third column counting from the last column.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop No No No No No No
Mobile No No No No No No

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera