nth-of-type vs nth-child

Question

I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.

M

Answer 1

in the picture out of added 10 elements, 8 are

and 2 are , the two shaded part elements are indicating remaining eight are

the css for the page goes here:

the first green bulb indicates

 section p:nth-child(1) {
                background-color: green; /*first-child of p in the flow*/
            }

and second red bulb in the code does not work because i is not first elements in the flow

section i:nth-child(1) {
            background-color: red;  /*[first-child of i in the flow]NO */
        }

and the blue bulb in the picture indicates the first type of i in the flow

section i:nth-of-type(1) {
            background-color: blue;  /*the type i of first child in the flow*/
        }