CSS: nth-of-type selector

By Xah Lee. Date: .

First-of-type, last-of-type

tag:first-of-type

match element x if:

  • tag matches x.
  • of all x's siblings, consider only those matched by tag, x is the first.

tag is optional. It can be a simple selector (selecting by tag name, id, class etc) or a compound selector (combination of tag name, id, class etc). If empty, it means the universal selector (* any tag).

p:first-of-type {
 color: red;
}
<div>
 <div> Zs3vx </div>
 <p>aa ✅</p>
 <p>bb</p>

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

 <p>ee. no match here because p is not first child.</p>
</div>
tag:last-of-type

similar to :first-of-type but match last.

Nth-of-type, nth-last-of-type

tag:nth-of-type(arg)

equivalent to

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

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