क्या सीएसएस के साथ सूची में एनएचटी आइटम छिपाने का कोई तरीका है?

Question

उदाहरण:

<ul class="mybuttons"> 
    <li class="mybutton"></li> 
    <li class="mybutton"></li> 
    <li class="mybutton"></li> 
</ul> 

यह सीएसएस का उपयोग कर 2 आइटम को छिपाने के लिए संभव है?

Answer 1

nth-child वास्तव में सीएसएस तरीका है।

शुद्ध सीएसएस में, वाक्य रचना बस भी इस मामले में

li.mybutton:nth-child(2){ 
    display:none; 
} 

nth-of-type(2) काम करता है।

संपादित करें: हालांकि यह सीएसएस उत्तर है, जैसा कि ध्यान दिया गया है, यह CSS3 है और only in some browsers लागू किया गया है। आईई और एफएफ 3 और नीचे इस मूल रूप से समर्थन नहीं करते हैं। एफएफ 3.5, कॉन्करर में और क्रोम, सफारी और ओपेरा में गलत तरीके से कार्यान्वित किया गया। nth-of-type() कार्यान्वयन बेहतर हैं।

पुराने ब्राउज़रों में समर्थन के लिए जावास्क्रिप्ट (jQuery, et al के साथ सरलीकृत) की आवश्यकता होगी। jQuery चयनकर्ता को Selectors/nthChild दस्तावेज़ों में वर्णित किया गया है, और उपर्युक्त $("li.mybutton:nth-child(2)").hide() के साथ पूरा किया जा सकता है।

Answer 2

n-th child pseudo selectors ऐसा करें, लेकिन वे अभी तक व्यापक रूप से समर्थित नहीं हैं और थोड़ी देर के लिए नहीं होंगे। आपको या तो जावास्क्रिप्ट/jQuery की आवश्यकता होगी या उन वस्तुओं के लिए एक विशेष कक्षा लिखने के लिए जिन्हें आप छिपाना चाहते हैं या बस आइटम को सीधे छुपाएं।

यहाँ कैसे आप jQuery के साथ यह कर करेंगे:

$("ul.mybuttons li:nth-child(2)").hide(); 

Answer 3

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

Answer 4

मैं पहली बार स्थापित करेगा वर्ग = "hidden_li" HTML फ़ाइल में के रूप में दूसरा ली।

उदाहरण:

<ul class="mybuttons"> 
<li class="mybutton"></li> 
<li class="mybutton" class="hidden_li"></li> 
<li class="mybutton"></li> 
</ul> 

तब मैं इसे इस तरह शैली होगा: इस सवाल का इतना मूल्य जोड़ने के लिए

.hidden_li{ 
    visibility : hidden; 
    height : 0px; 
    width : 0px; 
    margin : 0px; 
    padding : 0px; 
    overflow : hidden; 
}