All those children

You’re familiar with the nth-child selector, right? But did you also know about the more advanced nth-child selection with the keyword ‘of’?

As you probably know, the regular nth-child works like this: If you use :nth-child(2) on the ‘.super’ class, the browser selects the element that has the class ‘.super’ applied to it and is also the second child. However, using ‘of’ works slightly differently. The :nth-child(2 of .super) first filters all elements with the class ‘.super’ and then selects the second one from that list.

.super:nth-child(2) {
  /* Select the element with the class .super that is also the 2nd child */
  background-color: hot-pink;
}

:nth-child(2 of .super) {
  /* Select the 2nd child element that has the class .super applied to it */
  background-color: gold;
}

A pretty nice addition to our nth-child toolbox if you ask me!