मिश्रित कंटेनर में कक्षा के पहले बच्चे/अंतिम बच्चे का चयन कैसे कर सकते हैं?

Question

क्या मैं एक कक्षा में कक्षा के पहले और अंतिम बच्चों का चयन कर सकता हूं जिसमें विभिन्न वर्गों के बच्चे हैं?

उदाहरण के लिए:

<div class="main"> 
    <div class="red"></div> 
    <div class="red"></div> 
    <div class="red"></div> 

    <div class="black"></div> 
    <div class="black"></div> 
    <div class="black"></div> 

    <div class="green"></div> 
    <div class="green"></div> 
    <div class="green"></div> 
</div> 

मैं पहली बार के बच्चे और .black के अंतिम वाले बच्चे का चयन करना चाहते। क्या यह संभव है?

Answer 1

कक्षा चयनकर्ता के साथ संयोजन में nth-child या nth-of-type का उपयोग करें।

Live Example

.main .black:nth-child(2n) { 
    color: yellow; 
} 

या यदि आप उन्हें अलग

This demo

.main .black:nth-child(5n - 6) { 
    color: yellow; 
} 
.main .black:nth-child(5n - 4) { 
    color:purple; 
} 

समारोह n = element of type का उपयोग कर की गणना करता है, तो :nth-child(n) हर तत्व का चयन करेंगे होना चाहता हूँ, :nth-child(2n) सभी विषम तत्वों का चयन करता है , :nth-child(2n-1) सभी तत्वों का भी चयन करता है, और इसी तरह पर। आप बस एक समारोह है कि आप इच्छित तत्वों हो जाता है के साथ आने के लिए है

एक अन्य विकल्प कक्षा के पहले और/या पिछले तत्व के लिए एक और वर्ग को जोड़ने के लिए

आप एक साथ पहले बच्चे का चयन कर सकते हो सकता है जोनाथन ने दो चयनकर्ताओं को जोड़कर वर्ग के साथ तत्वों की गतिशील संख्या कहा (मैं div:not(.black) + div.black व्यक्तिगत रूप से पसंद करता हूं)।

जावास्क्रिप्ट

var blackElems = document.getElementsByClassName('black'); 
blackElems[blackElems.length - 1].style.color = 'purple'; 

: हालांकि, यह देखते हुए तत्वों की एक गतिशील संख्या के साथ एक वर्ग के साथ पिछले तत्व का चयन करने के लिए एक ही रास्ता है कि वहाँ कोई पिछले भाई का भी उपयोग कर रहा है जावास्क्रिप्ट या jQuery की तरह एक पुस्तकालय इस प्रकार है jQuery

$('.main .black:last').css({ 'color' : 'purple' }); 

Answer 2

नहीं, दुर्भाग्य से नहीं।

div.black:first-child, 
div:not(.black) + div.black 

पहले चयनकर्ता एक काले रंग की div कि जाहिरा तौर पर इसके बारे में पहले बच्चे है का चयन करता है:

हालांकि, यह एक निश्चित वर्ग के पहले बच्चे को चुनने के लिए, दो चयनकर्ताओं (example) के संयोजन के द्वारा संभव है माता-पिता। दूसरा चयनकर्ता एक काला div का चयन करता है जो पहले गैर-काले div द्वारा किया जाता है। इन दो नियमों का उपयोग करके, आप पहले काले div का चयन कर सकते हैं।

अधिक जानकारी के लिए, देखें: :first-child, :not, और adjacent sibling selector (+)।