Home > Net >  CSS : selecting multiple nth-child
CSS : selecting multiple nth-child

Time:04-29

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.

CodePudding user response:

perhaps something like this would work?

div div p:not(:first-child)

found in Style every thing except first child

CodePudding user response:

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.

  • Related