सीएसएस: आखिरी प्रकार के संयोजन के साथ संयोजन में काम नहीं कर रहा:

Question

मुझे कुछ ऐसा मिला है जो प्रदान किए गए स्निपेट के समान व्यवहार करता है। मुझे वस्तुओं की एक सूची मिली है, कि जब कोई चुना जाता है, तो मैं चाहता हूं कि वह सूची के शीर्ष पर प्रदर्शित हो, जिसे मैं आसानी से फ्लेक्स ऑर्डरिंग के साथ कर सकता हूं। एक समय में केवल एक ही चुना जा सकता है। लेकिन चूंकि प्रत्येक सूची तत्वों की सीमाएं होती हैं, इसलिए अंतिम तत्व में सीमा नहीं होनी चाहिए। अधिकांश मामलों के लिए बस li:last-of-type ठीक काम करता है, सिवाय इसके कि जब यह चयनित अंतिम सूची आइटम है।

मैंने कई चयनकर्ताओं की कोशिश की है जो एक अनियमित सूची में अंतिम सूची आइटम का चयन करना चाहिए जिसमें कोई कक्षा नहीं है, लेकिन last-of-type चयनकर्ता ठीक से व्यवहार नहीं कर रहा है।

यदि यह कोड में स्पष्ट नहीं है, तो मैं जिस चयनकर्ता का जिक्र कर रहा हूं वह .selection li:not(.selected):last-of-type है। और समस्या सूची के नीचे डबल सीमा है। यह अनियंत्रित सूची तत्व से आने वाली एक सीमा होनी चाहिए।

.selection ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: .15rem solid #666; 
 
} 
 

 
.selection li { 
 
    order: 2; 
 
    border-bottom: .15rem dashed #666; 
 
} 
 

 
.selection li.selected { 
 
    order: 1; 
 
} 
 

 
/** This selector should work in my mind, but it doesn't **/ 
 
.selection li:not(.selected):last-of-type { 
 
    border-bottom: none; 
 
} 
 

 
/** Non-important styles to put it into context **/ 
 
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; } 
 
li { padding: 1rem 2rem; background-color: #ebebeb; } 
 
li:hover { background-color: #ccc; } 
 
a { color: inherit; text-decoration: none; }

<div class="selection"> 
 
    <ul> 
 
    <li><a href="">1</a></li> 
 
    <li><a href="">2</a></li> 
 
    <li class="selected">3</li> 
 
    </ul> 
 
</div>

मैं भी समस्या प्रदर्शित करने के लिए इस Codepen snippet बना लिया है।

मुझे लगता है कि यह :last-of-type चयनकर्ता के साथ एक समस्या है, और शायद मैं इसे गलत उपयोग कर रहा हूं, लेकिन मेरे दिमाग में, उपरोक्त चयनकर्ता को काम करना चाहिए।

इस को ठीक करने के तरीके में कोई मदद या अंतर्दृष्टि, या तत्व का चयन करने का एक और तरीका, या अंतर्दृष्टि में यह क्यों काम नहीं करता है इसकी सराहना की जाएगी।

Answer 1

इस वैकल्पिक दृष्टिकोण पर विचार करें:

• :not चयनकर्ता को मिटाएं पूरी तरह
• सही केवल बाईं ओर एक सीमा ul दो, और शीर्ष
• केवल li
को निचली सीमा लागू

---

ul { 
    display: flex; 
    flex-direction: column; 
    border-top: .15rem solid #666; 
    border-left: .15rem solid #666; 
    border-right: .15rem solid #666; 
} 

li { border-bottom: .15rem solid #666; } 

Revised Codepen

---

यहाँ क्यों अपने चयनकर्ता काम नहीं कर रहा है:

.selection li:not(.selected):last-of-type { border-bottom: none; } 

यह मेरे लिए प्रकट होता है तुम कह रहे हो कि आप जब तक पिछले li तत्व का मिलान करना चाहते क्योंकि इसमें कक्षा selected नहीं है।

लेकिन यह नहीं है कि last-of-type काम करता है। यदि li एक भाई है, तो चयनकर्ता class पर ध्यान दिए बिना, इसका मिलान करेगा। चयनकर्ता डोम तत्वों से मेल खाता है। इसका मतलब है कि अगर आपने display: none को li पर लागू किया है, तो भी चयनकर्ता इसे मेल करेगा।

6.6.5.9. :last-of-type pseudo-class

:last-of-type छद्म वर्ग एक तत्व अपनी मूल तत्व के बच्चों की सूची में अपनी तरह का पिछले भाई है कि प्रतिनिधित्व करता है।

_{स्रोत: https://drafts.csswg.org/selectors-3/#last-of-type-pseudo}

अधिक विवरण: How to get nth-child selector to skip hidden divs

Answer 2

इसके बजाय पिछले नहीं चुना जाता मद (जो कठिन या CSS में असंभव है) से border-bottom हटाने की कोशिश कर के

, यह जिस तरह से स्थापित करने के लिए आसान है प्रत्येक आइटम में border-top और दूसरों के ऊपर दृश्यमान आइटम से अतिरिक्त निकालें, जो ... .selected है!
होने के अपने बाधा:

एक अलग सीमा सामान्य बाहर सीमा

पर से मेरी सूची में तत्वों पर इस समाधान के साथ अनुमति दी है।

Updated pen

.selection ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: .15rem solid #666; 
 
} 
 

 
.selection li { 
 
    order: 2; 
 
    border-top: .15rem dashed #666; 
 
    background: lightblue; 
 
} 
 

 
.selection li.selected { 
 
    order: 1; 
 
    border-top: none; 
 
    background: tomato; 
 
} 
 

 
/** Non-important styles to put it into context **/ 
 
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; } 
 
li { padding: 1rem 2rem; background-color: #ebebeb; } 
 
li:hover { background-color: #ccc; } 
 
a { color: inherit; text-decoration: none; }

<div class="selection"> 
 
    <ul> 
 
    <li><a href="">1</a></li> 
 
    <li><a href="">2</a></li> 
 
    <li class="selected">3</li> 
 
    </ul> 
 
</div>

Answer 3

एक जवाब की तुलना में एक हैक के रूप में इस अधिक पर विचार करें।

बस दिखाने के लिए यह किया जा सकता है कि, किसी तरह से, सीएसएस

में किया पीला तत्व एक का चयन किया है।

.selection ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: .15rem solid #666; 
 
} 
 

 
.selection li { 
 
    order: 2; 
 
    border-bottom: .15rem dashed #666; 
 
} 
 

 
div.selection li.selected { 
 
    order: 1; 
 
    background-color: yellow; 
 
} 
 

 
.selection li:nth-last-child(2) { 
 
    order: 3; 
 
} 
 

 
.selection li:not(.selected):nth-last-child(2) { 
 
    border-bottom: none; 
 
} 
 

 
.selection li.selected:nth-last-child(2) ~ li { 
 
    border-bottom: none; 
 
} 
 

 

 
/** Non-important styles to put it into context **/ 
 
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; } 
 
li { padding: 1rem 2rem; background-color: #ebebeb; } 
 
li:hover { background-color: #ccc; } 
 
a { color: inherit; text-decoration: none; } 
 
.selection {display: inline-block; width: 160px;}

<div class="selection"> 
 
    <ul> 
 
    <li><a href="">1</a></li> 
 
    <li><a href="">3</a></li> 
 
    <li class="selected">2</li> 
 
    </ul> 
 
</div> 
 
<div class="selection"> 
 
    <ul> 
 
    <li><a href="">1</a></li> 
 
    <li><a href="">3</a></li> 
 
    <li><a href="">2</a></li> 
 
    </ul> 
 
</div> 
 
<div class="selection"> 
 
    <ul> 
 
    <li><a href="">1</a></li> 
 
    <li class="selected"><a href="">3</a></li> 
 
    <li><a href="">2</a></li> 
 
    </ul> 
 
</div>