With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it’s siblings.

.myclass::first-child { }
.myclass::last-child { }
.myclass::nth-child { }
.myclass::nth-last-child { }

.myclass::first-of-type { }
.myclass::last-of-type { }
.myclass::nth-of-type { }
.myclass::nth-last-of-type { }

.myclass::only-child { }
.myclass::only-of-type { }

There are also a couple of text-specific pseudo elements to help with any typography needs:

.myclass::first-letter { }
.myclass::first-line { }

You can even extend the whole “:nth” concept to these typographic selectors by combining elements. We already have :first-line, so to complete the set let’s add :nth-line( ), :last-line, and :nth-last-line( ). With these, we could select the first two lines of a poem to highlight.

article.poem p:first-child::nth-line(-n+2) {
  font-variant-caps: small-caps;
  color: red;
}

Source: https://css-tricks.com/a-call-for-nth-everything/