2013-07-11 5 views
8

Ich spiele mit nth-child Selektor herum.Wie wähle ich das erste Element von n> 4 Elementen nur mit CSS?

Sagen, ich habe Gitter mit Reihen von 4 Elementen je und mein erstes und letztes Element hat Klassen von ui-first-child und ui-last-child jeweils:

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

Was würde ich wählen zu tun ist das erste Element nur, wenn es sind mehr als 4 Elemente mit reinem CSS.

Also, wenn es fünf Elemente wie folgt aus:

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

Ich möchte Bottom-Ecken auf dem ersten Element außer Kraft zu setzen.

Frage:
Ist es möglich, mit reinem CSS/n-Kind/erste/letzte Klasse das erste Element auf einer Gruppe von Elementen mit der Anzahl der Elemente> 4 wählen?

Danke!

+2

Vielleicht können Sie helfen: http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element- hat – rttmax

Antwort

10

Ich wartete für eine halbe Stunde, so dass vielleicht jemand die Antwort finden würde, aber das ist das einzige, was ich gefunden habe, und das Problem ist, dass es nicht funktioniert für ein "> n", aber es funktioniert für ein "= n". das heißt es funktioniert nur für eine bestimmte Anzahl, so ist es auf halbem Weg, was Sie für

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

http://jsfiddle.net/g3PDw/

EDIT: Geck ich es genagelt. Dieser funktioniert perfekt http://jsfiddle.net/g3PDw/9/

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

Ihre JS Fiddle 404s. –

+1

Diese neue JS-Fiddle ist in Ordnung –

+1

Sie müssen Ihren Selektor zu '(n + 5)' als '(n + 4)' [scheitert an vier Elementen] (http://jsfiddle.net/g3PDw/7/) zwicken , für das OP wollte nur wählen, ob [mehr als vier] (http://jsfiddle.net/g3PDw/8/). Aber deine Antwort war auf dem richtigen Weg. – ScottS

Verwandte Themen