CODEWITHSUNDEEP
htmlcsscss-selectors
user3537202
user3537202

Reputation: 195

Select multiple child elements using nth-child

div div p:nth-child(1 to 5)

How can I select multiple numbers with the nth-child, so I get the child elements 1 to 5 without having to write:

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) {

}

So it should look like this:

div div p:nth-child(1 to 5)

Upvotes: 11

Views: 16962

Answers (4)

potashin
potashin

Reputation: 44581

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){

}

Or

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

}

Upvotes: 5

Hughes
Hughes

Reputation: 1055

I've attached a link to a JSFiddle that should do what you are asking, but it should look something like this:

li:nth-child(-n+5){
    color: red;
}

http://jsfiddle.net/p2aBc/1/

Upvotes: 5

Banana
Banana

Reputation: 7463

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

}

will select elements 1 to 5

Upvotes: 11

jonode
jonode

Reputation: 797

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

}

This will select the first 5 children.

Upvotes: 9

Related Questions