ENGAGEWEB

To the Nth Degree

Steven

The ‘Nth’ selector, a relatively new feature of CSS3, is a godsend when it comes to using tables, but it also has some other interesting uses.

The basic function of the Nth selector is to choose certain elements in your HTML. For instance, in order to select every third LI in a UL list, the following selector could be used:

li:nth-of-type(3)
{
background:#ff0000;
}

This would change the background of every third LI to be bright red. The technique is most commonly used for tabular data and to improve ease of reading, so we would select every second LI and colour the background a subtle grey or blue to increase readability. Before this declaration, the colour value would have to be defined manually by the web designer, added with javascript, or applied in the PHP.

While the implementations are not particularly difficult to execute, the extra processing could affect efficiency and may increase the risk of consistency and formatting problems.

Unusual use of Nth

A fantastic and unusual example of the Nth selector being used can be found in this image gallery; its use to add a slight angular transformation to the images, making them seem almost random and messily placed, is particularly inspiring:

.transform li:nth-of-type(4n+1) {
-webkit-transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
-webkit-transform: rotate(-1deg);
}
.transform li:nth-of-type(4n+3) {
-webkit-transform: rotate(2deg);
}

As you can see the from the image here, it is not just the Nth selector which has been used, but an incremental number offset as well. This adds to the random appearance, making it more difficult for the site’s user to realise there is a pattern.