Engage Web logo - horizontal-resized


To the Nth Degree

To the Nth Degree

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:


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.

Latest posts by Steven (see all)

Get in touch

    Please confirm we can contact you


    Book a consultation with Engage Web

    Book a consultation with Engage Web

    Sorry to interrupt, but would you like to download our FREE Social Media Calendars?

    Social Media Calendar Product Mock Up for web

     You can use them to plan your social media and content in advance, saving you time and getting better results. When you use our social media calendars, you'll always know what's trending and what to post about for your business.