2013-07-11 13 views
8

Sto giocando con il selettore nth-child.Come selezionare il primo elemento di n> 4 elementi solo con CSS?

dire che ho griglia con righe di 4 elementi ciascuno e il mio primo e l'ultimo elemento di avere classi di ui-first-child e ui-last-child rispettivamente:

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

Quello che vorrei fare è selezionare il primo elemento solo se c'è sono più di 4 elementi utilizzando puro CSS.

Quindi, se ci sono cinque elementi come questo:

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

voglio ignorare bottom-angoli sul primo elemento.

Domanda:
E 'possibile con puro CSS/nth-child/prima/ultima classe per selezionare il primo elemento su un gruppo di elementi con numero di elementi> 4?

Grazie!

+2

Forse questo può aiutare: http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element- ha – rttmax

risposta

10

Ho aspettato mezz'ora in modo che qualcuno potesse trovare la risposta, ma questa è l'unica cosa che mi è venuta in mente e il problema è che non funziona per "> n", ma funziona per un "= n". cioè funziona solo per un numero specifico, in modo che sia a metà strada quello che hai chiesto

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

http://jsfiddle.net/g3PDw/

EDIT: Amico ho inchiodato esso. Questo funziona perfettamente http://jsfiddle.net/g3PDw/9/

li:first-child:nth-last-child(n+5) 
+0

Il tuo JS Fiddle 404s. –

+1

Questo nuovo JS Fiddle è ok –

+1

Devi modificare il selettore su '(n + 5)' come '(n + 4)' [fallisce con quattro elementi] (http://jsfiddle.net/g3PDw/7/) , per l'OP volevo solo selezionare se [più di quattro] (http://jsfiddle.net/g3PDw/8/). Ma la tua risposta era sulla strada giusta. – ScottS

Problemi correlati