CSS

the difference between nth-child() and nth-of-type()

/*the difference between nth-child() and nth-of-type()    :
example : */
  li:nth-child(1) {
    color: red ;
  }
/* it selects the first CHILD of the "li"   */ 
  li:nth-of-type(1) {
    color: red ;
  }
/* it selects the first ELEMENT WITH A TYPE OF "li" in the "li" parent */
 /* watch this video :  "https://www.youtube.com/watch?v=dMxOojFq2ho" */

nth of type vs nth child

<section>
   <p>Little</p>
   <p>Piggy</p>    <!-- We want this one -->
</section>

nth of type vs nth child

p:nth-child(2) { color: red; }