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 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)
Call Now Button
>

Who Engage Web has helped:

Ice Lolly Minuteman Press BUNZLGS1 UK The Underfloor Heating Store West Cheshire Athletic Club Thomas Cook MWB Business ExchangeWeb Media 360 D2 Architects Beacon Financial Training Steely ProductsBurlydam Garden Centre Asentiv BodyHQ Clever Vine Endeavour Mortgages Pro Networks Comm-Tech Wickers World Ascot Mortgages Top Teks
TEL: 0345 621 4321