CSS3---nth-of-type (n) Selector

Nth-of-type (n) Selector

The :nth-of-type(n) selector and the selector are :nth-child(n) very similar, except that it calculates only the child elements of one of the types specified in the parent element. When a child element in an element is not just a child of the same type, it is convenient and useful to use the ": Nth-of-type (N)" selector to locate a child element of some type in the parent element . In the ": Nth-of-type (N)" selector the "n" and ": Nth-child (N)" selectors in the "n" parameter also the same, can be a specific integer , can be an expression , or it can be a keyword .

Sample Demo

With the ": Nth-of-type (2n)" selector, set the background of the number of even segments in the container "div.wrapper" to orange.

HTML code:

<div class= "wrapper" >  <div> I am a div element </div>  <p> I am a paragraph element </p>  <div > I am a div element </div>  <p> I am a paragraph </p>  <div> I am a div element </div>  <p> I am a paragraph </p>  <div> I am a div element </div>  <p> I am a paragraph </p>  <div> I am a DIV element </div>  <p> I'm a paragraph </p>  <div> I'm a div element </div>  <p> I'm a paragraph </p >  <div> I'm a div element </div>  <p> I'm a paragraph </p>  <div> I'm a DIV element </div >  <p> I'm a paragraph </p></div>

CSS code:

. wrapper > P:nth-of-type (2n) {  background:orange;}

Demo Result:

CSS3---nth-of-type (n) Selector