मध्य बाल छद्म-वर्ग

Question

क्या मध्यस्थ बच्चे को तत्वों की सूची में प्राप्त करने के लिए सीएसएस चयनकर्ताओं का उपयोग करने का कोई तरीका है?

मुझे पता है कि कोई शाब्दिक :middle-child चयनकर्ता नहीं है, लेकिन जावास्क्रिप्ट का उपयोग किए बिना कोई और तरीका है?

Answer 1

जावास्क्रिप्ट इस क्लाइंट पक्ष को करने का एकमात्र तरीका है।

Answer 2

क्या आपने :nth-child(#) को आजमाया है?

इस पर निर्भर करता है कि आप किसको चुनना चाहते हैं, बस नंबर के साथ # को प्रतिस्थापित करें।

Answer 3

यदि आप उन सभी तत्वों के लिए शैली लागू करना चाहते हैं जो न तो पहले बच्चे हैं और न ही अंतिम बच्चे हैं, तो आप :not(:first-child) का उपयोग कर सकते हैं, शैली लागू कर सकते हैं और फिर अंतिम तत्व से 'शैली को दूर करने' के लिए :last-child का उपयोग कर सकते हैं। लेकिन आपको 3 तत्वों से कम होने पर क्या होता है इसके बारे में सोचना होगा।

Answer 4

यह मेरे लिए अच्छी तरह से काम कर रहा है:

*:not(:first-child):not(:last-child) { 
    ... 
} 

आप इस का एक उदाहरण देख सकते हैं: http://codepen.io/bentomas/pen/Gwqoe

यह करने के लिए एक चेतावनी है कि यह केवल IE में 9+ काम करता है: http://caniuse.com/#feat=css-sel3

Answer 5

जबकि सुरुचिपूर्ण नहीं, अगर आप तत्वों की कुल संख्या के ऊपरी और निचले सीमा पता है, तुम एक जानवर बल दृष्टिकोण बीच तत्व का चयन करने लग सकता है।

उदाहरण के लिए, निम्नलिखित नियम 5, 7, या 9 तत्वों में से एक सेट में मध्यम तत्व का चयन करेंगे।

div:nth-child(3):nth-last-child(3) { 
    /* The middle element in a set of 5 is the 3rd element */ 
} 

div:nth-child(4):nth-last-child(4) { 
    /* The middle element in a set of 7 is the 4th element */ 
} 

div:nth-child(5):nth-last-child(5) { 
    /* The middle element in a set of 9 is the 5th element */ 
} 

या सास के साथ:

@for $i from 3 through 5 { 
    div:nth-child(#{$i}):nth-last-child(#{$i}) { 
     /* The middle element */ 
    } 
} 

Answer 6

आप दृष्टिकोण है, तो जैसे "पहले नहीं और अंतिम नहीं" का उपयोग कर सकते हैं:

सीएसएस

li:not(:first-child):not(:last-child) { 
    color:red; 
} 

एचटीएमएल

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
</ul> 

चेक JsFiddle