2013-07-11 6 views
8

मैं nth-child चयनकर्ता के साथ खेल रहा हूं।सीएसएस के साथ तत्वों के पहले तत्व का चयन कैसे करें?

मैं 4 तत्वों प्रत्येक की पंक्तियों के साथ ग्रिड है और मेरा पहला और अंतिम तत्व क्रमश ui-first-child की कक्षाओं और ui-last-child है कहते हैं:

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

मैं करना चाहते हैं क्या चयन पहला तत्व ही अगर है वहाँ शुद्ध सीएसएस का उपयोग कर 4 से अधिक तत्व हैं।

तो अगर वहाँ पांच तत्वों इस तरह हैं:

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

मैं पहले तत्व पर नीचे कोनों ओवरराइड करना चाहते।

प्रश्न:
यह संभव पहले/तत्वों> 4 की संख्या के साथ तत्वों के एक समूह पर पहला तत्व का चयन करने के आखिरी वर्ग है शुद्ध सीएसएस/n वें-बच्चे के साथ /?

धन्यवाद!

+2

शायद यह आपकी मदद कर सकते हैं: http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element- – rttmax

उत्तर

10

मैं आधे घंटे तक इंतजार कर रहा था ताकि शायद कोई जवाब प्राप्त कर सके, लेकिन यह एकमात्र चीज है जिसके साथ मैं आया हूं, और समस्या यह है कि यह "> n" के लिए काम नहीं करता है, लेकिन यह काम करता है एक "= एन" के लिए। यानी यह केवल एक विशिष्ट संख्या के लिए काम करता है, तो यह आधे रास्ते आप

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

http://jsfiddle.net/g3PDw/

के लिए क्या पूछा संपादित है: Dude मैं इसे किसी न किसी। यह एक पूरी तरह से काम करता है http://jsfiddle.net/g3PDw/9/

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

आपके जेएस फीड 404s है। –

+1

यह नया जेएस फिडल ठीक है –

+1

आपको अपने चयनकर्ता को '(एन +5)' के रूप में '(एन + 4)' के रूप में ट्विक करने की आवश्यकता है [चार तत्वों में विफल रहता है] (http://jsfiddle.net/g3PDw/7/) , ओपी के लिए केवल [चार से अधिक] (http://jsfiddle.net/g3PDw/8/) चुनना चाहता था। लेकिन आपका जवाब सही रास्ते पर था। – ScottS

संबंधित मुद्दे