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

**URL:** <https://forum.kirupa.com/t/all-about-nth-of-type-and-nth-child-kirupa-com/352441>\
**Category:** programming\
**Created:** [November 23, 2014, 7:27am UTC](https://forum.kirupa.com/t/all-about-nth-of-type-and-nth-child-kirupa-com/352441 "2014-11-23T07:27:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 7:27am UTC](https://forum.kirupa.com/t/all-about-nth-of-type-and-nth-child-kirupa-com/352441/1 "2014-11-23T07:27:55Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/html5/css_selectors_type_class_id.htm), 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](http://www.kirupa.com/html5/all_about_nth-of-type_and_nth-child.htm)

---

<div class="post-metadata">

**Author:** ![Chuksbasiluche](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chuksbasiluche/32/17223_2.png) [@Chuksbasiluche](https://forum.kirupa.com/u/Chuksbasiluche)\
**Post date:** [March 30, 2022, 12:38pm UTC](https://forum.kirupa.com/t/all-about-nth-of-type-and-nth-child-kirupa-com/352441/2 "2022-03-30T12:38:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 30, 2022, 5:21pm UTC](https://forum.kirupa.com/t/all-about-nth-of-type-and-nth-child-kirupa-com/352441/3 "2022-03-30T17:21:09Z")

</div>

Hi @Chuksbasiluche - welcome to the forums 🙂

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? 🙂

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![Chuksbasiluche](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chuksbasiluche/32/17223_2.png) [@Chuksbasiluche](https://forum.kirupa.com/u/Chuksbasiluche)\
**Post date:** [March 31, 2022, 8:25am UTC](https://forum.kirupa.com/t/all-about-nth-of-type-and-nth-child-kirupa-com/352441/4 "2022-03-31T08:25:43Z")

</div>

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.