'CSS : selecting multiple nth-child

Say I have this css :

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 select nth-child elements from 1 until 5.

And here are shortcuts

div div p:nth-child(n+1):nth-child(-n+5){
}

OR

div div p:nth-child(-n+5){
}

My question is,

How to select not the first element from 1 to 5, but the second element from 2 to 5 ?

So basically if I have this HTML :

<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 would like it to apply a css background-color: red, only from the second div > p, and this until the 5th one.

javascripthtmlcss


Solution 1:[1]

perhaps something like this would work?

div div p:not(:first-child)

found in Style every thing except first child

Solution 2:[2]

Is this what you're looking for? Where the first set isn't selected but the rest are?

div div:not(:first-child) p {
  background-color: blue;
}

Fiddle Here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Max Strandberg
Solution 2 iamaword

Related Questions