CSS: nth-of-type() selector

Match by Specific Order Rank of Same Tag in Siblings

These let you select the nth occurrence of the tag. (counting only those at the same level children)

tag:first-of-type

Match tag if it is the first occurrence of tag among siblings.

p:first-of-type {
 color: red;
}

this match the aa and cc in the following

<div>
 <p>aa</p>
 <p>bb</p>

 <div>
  <p class="xx">cc</p>
  <p class="xx">dd</p>
 </div>

 <p>ee</p>
</div>

tag:last-of-type

Match tag that is last occurrence of tag among siblings.

tag:nth-of-type(arg)

equivalent to

:nth-child(arg of tag)

• CSS: nth-child selector

tag:nth-last-of-type(arg)

similar to :nth-of-type, but counting starting from end.