If we take the following css code:
div div p:nth-child(1),
div div p:nth-child(2),
div div p:nth-child(3),
div div p:nth-child(4),
div div p:nth-child(5) {
}
This will target elements with nth-child from 1 to 5.
Now, let's look at some shortcuts:
div div p:nth-child(n+1):nth-child(-n+5){
}
OR
div div p:nth-child(-n+5){
}
The question I have is,
How can we target not the first element from 1 to 5, but the second element from 2 to 5?
So, if we have this HTML structure:
<div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
I want to apply a background-color: red in CSS, only starting from the second div > p, and continuing until the 5th one.