सीएसएस: पिछले चयन फ्लेक्स बच्चों

Question

आदेश दिया

को देखते हुए छँटाई के लिए इस्तेमाल एक इनलाइन order विशेषता के साथ flexbox बच्चों की आर्बिटरी संख्या, कैसे एक सीएसएस में पिछले आदेश दिया तत्व का चयन करेंगे?

<ul style="display:flex"> 
    <li style="order: 4">a</li> 
    <li style="order: 5">b</li> 
    <li style="order: 3">c</li> 
    <li style="order: 1">d</li> 
    <li style="order: 2">e</li> 
</ul> 

:last-of-type फ्लेक्स बच्चों पर काम नहीं करता है, और सूची हो सकता है किसी भी लंबाई, इसलिए आदेश सूचकांक द्वारा एक विकल्प का चयन किया गया है नहीं। मुझे जावास्क्रिप्ट समाधान में रूचि नहीं है।

Answer 1

आपका कोड नहीं है पूरा। आपको अपने divs (डिस्प्ले: फ्लेक्स) में एक फ्लेक्स रैपर प्रदान करना होगा, ताकि = ऑर्डर: मान्य हो जाएगा। इसलिए, div .wrapper: पिछले वाले बच्चे चाल करना चाहिए।

Answer 2

इसका एकमात्र पास समाधान

div[style="order: 6"] { 
    background-color: yellow; 
} 

हो सकता है और यह 6 आदेश के लिए पीले रंग के साथ पृष्ठभूमि रंग होगा, लेकिन क्योंकि हम सरणी की लंबाई पता नहीं है, तो यह आपको की तरह लगता है 'कुछ जावास्क्रिप्ट या इसी तरह के चयनकर्ता sintaxis साथ jQuery की आवश्यकता होगी जहां इस मामले में नंबर 6 सरणी की लंबाई के साथ एक चर हो जाएगा।