Stacking the first 10 items in a list

Question

Could something like li: nth-child be used to style the first ten elements in a list?

<ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> </ol> 

so 1 to 10 will be fantasy, and 11 and 12 will be normal. I would prefer not to use the class if possible.

Answer 1

Example

nth childs:

 :nth-child(-n+10) 

it works here: link .

for more on understanding this check out this site .

---

I think if you want IE support, I can not make it more beautiful. At least I don’t know how with this cheap hack.

 ul>li + li + li + li + li + li + li + li + li + li + li{ text-align: center; /*makes everything after 10 centered*/ }​ 

http://jsfiddle.net/TzLqZ/ for an example of this above

---

Here is the IE path where the first 10 are centers and the last 2 are normal: http://jsfiddle.net/TzLqZ/3/

 ol>li{ text-align: center; color: blue; } ol>li+li+li+li+li+li+li+li+li+li+li { text-align: left; color: red; } 

Answer 2

I think you are looking for the nth child pseudo selector seen here http://css-tricks.com/how-nth-child-works/ I think what you want for:

select all but the top ten:

 ul li:nth-child(n+11){} 

or just the top ten:

 ul li:nth-child(-n+10){} 

gotta do the trick.

However , Internet Explorer does not support at least until ie8 according to the article. Therefore, do not rely on this to be critical (although I do not know which style of children's style would be critical).