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.