How to select multiple children using css ": nth-child ()"

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

How can I select multiple numbers with nth-child, so I get children from 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) 
+6
source share
4 answers
 div div p:nth-child(-n+5){ } 

This will select the first 5 children.

+5
source
 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){ } 
+4
source
 div div p:nth-child(n+1):nth-child(-n+5){ } 

select items 1 to 5

+4
source

I attached a link to the JSFiddle, which should do what you ask, but it should look something like this:

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

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

+4
source

All Articles