To the Nth Degree

Posted on August 10, 2013

 

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.

Steven

Steven is Engage Web’s go-to man for all things web-related, bringing his knowledge of current trends in web design and development to the team.

Latest posts by Steven (see all)

Like us on Facebook to see more posts like this

You might also be interested in:

1 Comment »

RSS feed for comments on this post. TrackBack URL

Have your say!

Call Now Button

We have worked with:

minute-man-press-image
TEL: 0345 621 4321