सीएसएस: का चयन करें पहले आसन्न भाई

Question

मैं तो जैसे किसी HTML सूची है:

<ul> 
    <li class="heading">Heading 1</li> 
    <li class="heading">Heading 2</li> 
    <li>Text Under Heading 2</li> 
</ul> 

के बाद से शीर्षक 1 इसके तहत कोई टेक्स्ट नहीं है, मैं सीएसएस के साथ इसे छिपाने के लिए चाहते हैं।

मैं ऐसा करते हैं तो

li.heading + li.heading { display: none; } 

यह शीर्षक 2 खाल के बजाय शीर्षक 1.

मैं शीर्षक 1 कैसे छिपा कर सकते हैं? क्या आसन्न भाई बहनों को देखने का पहला तरीका है और पहले का चयन करें?

Answer 1

वर्तमान में परिभाषित और लागू किए गए सीएसएस का उपयोग करना संभव नहीं है। इसके लिए एक चयनकर्ता की आवश्यकता होगी जो इसके बाद अपने भाई बहनों के आधार पर एक तत्व का चयन करे। सीएसएस चयनकर्ता पहले से या बाहरी तत्वों के आधार पर एक तत्व का चयन कर सकते हैं, लेकिन निम्नलिखित या आंतरिक तत्वों के आधार पर नहीं।

वांछित प्रभाव को सरल तरीके से जावास्क्रिप्ट का उपयोग करके निकाला जा सकता है, और आप इस उद्देश्य के आधार पर निर्णय ले सकते हैं कि क्या आप केवल तत्वों को डिस्प्ले से हटाते हैं या पूरी तरह से दस्तावेज़ पेड़ से हटा देते हैं।

Answer 2

वहाँ छिपाने के लिए कुछ तरीके हैं केवल केवल "शीर्षक 1":

ul li:first-child {display:none;}

वैकल्पिक रूप से:

li.parent{ display: none; } 
li.parent + li.parent { display: list-item; } 

इसके अलावा, <li>Child of Heading 2</li>नहीं<li class="parent">Heading 2</li> का एक बच्चा है। यह एक भाई है।

Answer 3

आधिकारिक CSS3 स्पेक वर्तमान में इस तरह कुछ भी समर्थन नहीं करता है, हालांकि मुझे एहसास है कि यह उपयोगी होगा।

मैं सीएसएस चयनकर्ताओं को जोड़ने के लिए कुछ प्रीबिल्ट जावास्क्रिप्ट या jquery स्क्रिप्ट/पुस्तकालयों के लिए खोज करने का प्रयास करूंगा। हालांकि मैं कभी भी कुछ भी नहीं आया है।

यदि आप कुछ पार करते हैं, तो कृपया इसे यहां पोस्ट करें।

यदि आपको कुछ भी नहीं मिला है, तो आप इसे मैन्युअल रूप से भी कर सकते हैं, या एक पूरी तरह से अलग समाधान खोजने का प्रयास कर सकते हैं।

मेरी इच्छा है कि आपके पास आपके लिए बेहतर जवाब हो। क्षमा करें :(

Answer 4

यह कुछ सीमाओं के साथ, सीएसएस के साथ पहली बार भाई को लक्षित करना संभव है।

प्रश्न में उदाहरण के लिए यह इस

li.heading { display: none; }     /* apply to all elements */ 
li.heading + li.heading { display: list-item } /* override for all but first sibling */ 

यह काम करता है की तरह कुछ के साथ किया जा सकता है, लेकिन यह आवश्यक है कि आप पहले बच्चे के लिए सेटिंग को ओवरराइड करने के लिए भाई बहनों पर शैलियों को स्पष्ट रूप से सेट कर सकें।

Answer 5

getElementsby className को js उपयोग का प्रयास करें और यदि एक से अधिक 1 तो सीएसएस का उपयोग करें:

उल ली: पहले बच्चे {प्रदर्शन: कोई नहीं;} मैं जानता हूँ कि इस सवाल का पहले से ही एक वैध चिह्नित जिसका उत्तर

Answer 6

, लेकिन हो सकता है कि अन्य लोग मेरे सीएसएस-केवल समाधान का उपयोग करना चाहते हैं:

मैं एक कंटेनर और इस सीमा में पतन के लिए अलर्ट (इस मामले में बूटस्ट्रैप अलर्ट) की एक सूची रखना चाहता था। प्रत्येक चेतावनी में सीमा-त्रिज्या होता है, जो कि एक कंटेनर में होते हैं, बल्कि मूर्खतापूर्ण दिखता है। तो मार्जिन-टॉप के साथ: -1 पीएक्स मैंने अपनी सीमाओं को ध्वस्त कर दिया। अगले चरण के रूप में मुझे पहले की शैलियों, अंतिम चेतावनी के बीच में प्रत्येक अलर्ट को संशोधित करना पड़ा। और यह एक चेतावनी, दो अलर्ट और एन अलर्ट के लिए भी अच्छा दिखना चाहिए।

.alert { 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    margin: 0; 
} 

// set for the first alert that it should have a rounded top border 

.alert:last-child { 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 

// set for the last alert that it should have a rounded bottom border 
// if there is only one alert this will also trigger it to have a rounded bottom border aswell 

.alert+.alert:last-child { 
    margin-top: -1px; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
} 

//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders 

.alert+.alert:not(:last-child) { 
    margin-top: -1px; 
    border-radius: 0; 
} 

// for each following alert in between we remove the top rounded borders and make their borders collapse 

और यहां कई अलर्ट के लिए एक कोणीय टेम्पलेट है।

<div id="alertscontainer"> 
    <div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class"> 
     {{alert.body}} 
    </div> 
</div>