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).

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.

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.

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.