All About nth-of-type and nth-child | kirupa.com

programming
1

by kirupa | 27 November 2012

By now, you know that you can craft CSS selectors that target one element or a bunch of elements by using an element's tag, id value, class value, or a combination of all three. With the latest round of CSS improvements, you have two additions that enhance the three approaches you already have. These additions are the nth-child and nth-of-type pseudo-classes (aka pseudo-class selectors).

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/all_about_nth-of-type_and_nth-child.htm
2

Sorry sir, but why do the following CSS nth-of-type 3n - 1 affects the -1, 2, 5, 8 etc, instead of -1, -2, -5, -8 etc going by the formula An + B?
Please explain.

Thanks a lot.

3

Hi @Chuksbasiluche - welcome to the forums :slight_smile:

The value of n goes from 0 and up like 0, 1, 2, 3, 4, and so on. Think of 3n - 1 as a math math equation. When n is 0, 3 * 0 - 1 is -1. When n is 1, 3 * 1 - 1 is 2. Similarly, for n is 2, 3 * 2 - 1 is 5.

Does this help? :slight_smile:

Cheers,
Kirupa

4

Oh! I missed it earlier. Thanks for bringing me back.
Your tutorial is the best of all I have ever come across anywhere. Your explanation approach is topnotch.
Thanks once again.

1 Like