Difference Between :nth-child and :nth-of-type

CSS Selectors

There is a difference¬†between :nth-child and :nth-of-type considered as CSS selectors. The :nth-child refers to the “Nth matched child element”, p:nth-child(2) will select the second child of P tag however p:nth-of-type will select the second matched p element.

:nth-child selector

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

:nth-child selector means select an element if

  • It is a paragraph element
  • It is the second child of a parent

:nth-of-type selector

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

:nth-of-type selector means

  • Select the second paragraph child of a parent

Leave a Reply