CSS3 के अंतिम तत्व मिल

Question

मैं निम्नलिखित कोड से पिछले तत्व (घंटा) कैसे प्राप्त कर सकते हैं:

<div> 
    <div> 
     <span class="hr"></span> 
    </div> 

    <div> 
     <span class="hr"></span> 
    </div> 

    <div> 
     <span class="hr"></span> <!-- I need this --> 
    </div> 
</div> 

.hr:last-child इस के लिए काम नहीं करता।

बेशक, डीओएम संरचना अधिक जटिल हो सकती है। मुझे बस अंतिम आवश्यक तत्व लाने की जरूरत है।

Answer 1

आपका प्रश्न बिल्कुल स्पष्ट नहीं है; आपके उदाहरण से अंतिम .hr तत्व प्राप्त करने के कई तरीके हैं, लेकिन आप कहते हैं "डॉम संरचना अधिक जटिल हो सकती है।" अपने प्रश्न का उत्तर देने के लिए, आपको यह उल्लेख करना होगा कि आपके पास क्या संभव हो सकता है डीओएम संरचनाएं; कुछ में यह संभव हो सकता है, कुछ में यह नहीं होगा।

div div:last-of-type .hr 

यहाँ एक और तरीका .hr बाहरी div की अंतिम संतान से बाहर निकलना है:

div :last-child .hr 

तो

यहाँ एक ही रास्ता .hr पिछले div से बाहर निकलना है दस्तावेज़ के बाहर आपको अंतिम .hr तत्व प्राप्त करने की आवश्यकता है, चाहे वह अंदर क्या हो, फिर भी आप इसे सीएसएस में नहीं कर सकते हैं। सीएसएस में, आप पदानुक्रम के एक विशेष स्तर पर केवल पहले, अंतिम, या n वें तत्व का चयन कर सकते हैं, आप किसी भी प्रकार के अंतिम तत्व का चयन नहीं कर सकते हैं, चाहे वह घोंसला है।

Answer 2

div:last-child .hr 

Answer 3

निम्नलिखित चयनकर्ता काम करना चाहिए:

div *:last-child *:last-child 

डेमो: https://jsfiddle.net/78w3bofg/1/