CSS Selector to select n-th element inside another.

The CSS selector to select n-th child element inside an another parent element would look something like this.

Let’s say you want to target the 5th p tag inside a div with the class post-content

div.post-content p:nth-of-type(5)

More examples of using nth-of-type css selector.

1. Select the first p element inside a div element:

div p:nth-of-type(1) {
  /* your styles here */
}

2. Select every even li element inside a ul element:

ul li:nth-of-type(even) {
  /* your styles here */
}

3. Select every third h2 element inside a section element:

section h2:nth-of-type(3) {
  /* your styles here */
}

4. Select the last span element inside a div element:

div span:nth-last-of-type(1) {
  /* your styles here */
}

5. Select the 2nd to 4th input elements inside a form element:

form input:nth-of-type(n+2):nth-of-type(-n+4) {
  /* your styles here */
}

In each of these examples, the :nth-of-type() selector is used to target a specific type of element based on its position in the parent element.