The difference between pseudo-class Nth-child and Nth-of-type in CSS3

This post consists of: http://xinpure.com/css3-pseudo-class-difference-between-nthchild-and-nthoftype/

First look at the common denominator of Nth-child (n) and Nth-of-type (n)

The only common denominator is: the use of parameter n

n can be a number, a keyword, or a formula (n > 0)

Nth-child (2) represents the second child element of its parent element

Nth-child (2n) or nth-child (even) indicates the number of child elements of its parent element

Nth-child (2n-1) or nth-child (odd) represents the odd number of child elements of its parent element

And so on. Other formulas about N

Difference Analysis about Nth-child

p:nth-child(2) {    background: #ccc}

The second child of the parent element that acts on p, which is invalid if the element is not p

About Nth-of-type

p:nth-of-type(2) {    background: red}

The second P element (child element) that acts on the parent element of P

Difference Example HTML Code:

CSS Code

p:nth-child(2) {    background: #ccc}p:nth-of-type(2) {    background: #red;}

Result diagram

The difference between pseudo-class Nth-child and Nth-of-type in CSS3