CSS: first child, sibling rank selector

No Sibling

tag:only-child

Match tag if it's the only child.

tag here is compound selector, or none, which means the universal selector (* any tag).

Match by Specific Sibling Rank

tag:first-child

Match tag only if it is the first child element.

/*
Match span only when it is the 1st child.
Note, this is different from “match the 1st span”.
*/
span:first-child {
 color: red;
}

tag:last-child

Match tag only if it is the last child element.

tag:nth-child(arg)

• CSS: nth-child selector

tag:nth-last-child(arg)

similar to :nth-child, but count starting from end.

• CSS: nth-child 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.

Match Unique Child among Siblings

tag:only-of-type

Match tag if it is the only type (tag name) among siblings.

span:only-of-type {
 color: red;
}

<div>
 <div>1</div>
 <span>2</span>
 <span>3</span>
</div>
<div>
 <div>A</div>
 <span>B</span>
 <div>C</div>
</div>

In the above example, only the B will be colored, because that span is the only span tag among siblings.