2013-07-11 9 views
8

Gram z selektorem nth-child.Jak wybrać pierwszy element n> 4 elementów tylko z CSS?

Powiedz, mam siatki z wierszy 4 elementów każdy i mój pierwszy i ostatni element ma klas ui-first-child i ui-last-child odpowiednio:

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

Co chciałbym zrobić, to wybrać pierwszy element tylko wtedy, gdy są więcej niż 4 elementy używając czystego CSS.

Więc jeśli istnieje pięć elementy, takie jak ten:

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

Chcę zastąpić dolne narożniki na pierwszym elemencie.

Pytanie:
Czy to możliwe z czystego CSS/nth-child/pierwsza/ostatnia klasa, aby wybrać pierwszy element na grupy elementów z szeregu elementów> 4?

Dzięki!

+2

Być może to pomóc: http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element- ma – rttmax

Odpowiedz

10

Czekałem przez pół godziny, aby być może ktoś znalazł odpowiedź, ale to jedyna rzecz, którą wymyśliłem, a problemem jest to, że nie działa dla "> n", ale działa dla "= n". tzn działa tylko dla konkretnego numeru, więc jest to w połowie drogi, co prosiłeś

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

http://jsfiddle.net/g3PDw/

EDIT: Dude I przybili go. Ten działa doskonale http://jsfiddle.net/g3PDw/9/

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

Twój JS Fiddle 404s. –

+1

To nowe JS Fiddle jest ok. –

+1

Musisz zmienić swój selektor na '(n + 5)' jako '(n + 4)' [nie działa przy czterech elementach] (http://jsfiddle.net/g3PDw/7/) , dla PO tylko chciał wybrać, czy [więcej niż cztery] (http://jsfiddle.net/g3PDw/8/). Ale twoja odpowiedź była na właściwej drodze. – ScottS

Powiązane problemy