एनएच-बच्चे() या पहले बच्चे? एक और

Question

में पहले और दूसरे बच्चे का चयन कैसे करें मैं एक अनॉर्डर्ड सूची में पहली दो सूची आइटम चुनना चाहता हूं। - मुझे लगता है कि कैसे करते हो

ul li:nth-child(1) a { 
    background: none repeat scroll 0 0 beige; 
} 

या

ul li:first-child a { 
    background: none repeat scroll 0 0 beige; 
} 

मैं दोनों पहली और दूसरी लाइन आइटम का चयन करने के लिए करना चाहते हैं: मैं इस प्रकार पहले आइटम का चयन कर सकते?

Answer 1

js या :nth-child (जो मेरा मानना ​​है कि IE में समर्थित नहीं है)

ul li:first-child, ul li:first-child + li { 
    list-style: none; 
} 

Here के उपयोग के बिना एक डेमो IE7

Answer 2

यह आईई 9 + में काम करता है लेकिन यह सबसे छोटा नहीं है। @ बोल्टक्लॉक का चयनकर्ता आईई 9 + के लिए सबसे छोटा समाधान है। मुझे लगता है कि यह समझने में थोड़ा आसान है इसलिए मैं इसे एक विकल्प के रूप में छोड़ दूंगा।

ul li:first-child a, ul li:nth-child(2) a 
{ 
    background: none repeat scroll 0 0 biege; 
} 

Answer 3

क्रॉस-ब्राउज़र संगतता के लिए आपकी सर्वश्रेष्ठ शर्त jQuery का उपयोग करना और सूची आइटम में कक्षा असाइन करना होगा।

• http://api.jquery.com/eq-selector/
• http://api.jquery.com/index/

कुछ की तरह ...

$(function() { 

$('li').each(function() { 
    if($(this).index() == 1 || $(this).index() == 2) { 
    $(this).addClass('first_or_second'); 
    } 
}); 

}); 

Answer 4

पहले और दूसरे बच्चों के चयन के लिए, आप तो जैसे एक भी :nth-child() छद्म वर्ग का उपयोग कर सकते हैं:

ul li:nth-child(-n+2) a { 
    background: none repeat scroll 0 0 beige; 
} 

Answer 5

.trJobStatus ul{ 
 
    width: 500px; 
 
    height:500px; 
 
    float: left; 
 
    } 
 
.trJobStatus ul li{ 
 
    width: 50px; 
 
    height:50px; 
 
    border: solid 1px #ddd; 
 
    list-style:none; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height:50px; 
 
    font-size:25px; 
 
    } 
 

 
.trJobStatus ul li:nth-child(1), 
 
.trJobStatus ul li:nth-child(5){ 
 
    color:red; 
 
    }

 
    <div class="trJobStatus"> 
 
    <ul> 
 
<li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div>

.trJobStatus उल में परीक्षण किया गया है li: nth-child (1), .trJobStatus ul li: nth-child (2) { रंग: #fff; पृष्ठभूमि-रंग: #ddd; }