8

I'm playing around with nth-child selector.

Say I have grid with rows of 4 elements each and my first and last element have classes of ui-first-child and ui-last-child respectively:

<ul>
 <li.ui-first-child>
 <li>
 <li>
 <li.ui-last-child>
</ul>

What I would like to do is select the first element ONLY if there are more than 4 elements using pure CSS.

So if there are five elements like this:

 <el.first><el><el><el>
 <el.last>

I want to override bottom-corners on the first element.

Question:
Is it possible with pure CSS/nth-child/first/last class to select the first element on a group of elements with number of elements > 4?

Thanks!

frequent
  • 27,643
  • 59
  • 181
  • 333
  • 2
    Perhaps this can help you: http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has – rttmax Jul 11 '13 at 13:30

1 Answers1

10

I waited for half an hour so that maybe someone would find the answer, but this is the only thing I came up with, and it's problem is that it doesn't work for a "> n", but it works for a "= n". i.e it works only for a specific number, so it's half way what you asked for

li:first-child:nth-last-child(4) {
    /* Whatever here */
}

http://jsfiddle.net/g3PDw/

EDIT: Dude I nailed it. This one works perfectly http://jsfiddle.net/g3PDw/9/

li:first-child:nth-last-child(n+5)
Milad.Nozari
  • 2,243
  • 3
  • 26
  • 47
  • 1
    You need to tweak your selector to `(n+5)` as `(n+4)` [fails at four elements](http://jsfiddle.net/g3PDw/7/), for the OP only wanted to select if [more than four](http://jsfiddle.net/g3PDw/8/). But your answer was on the right track. – ScottS Jul 11 '13 at 14:43