सीएसएस

Question

में दोहराव के बिना वें बच्चे को मैं 10 के लिए शैली मद 1 चाहते हैं, लेकिन बजाय

&.nth-child(1) { //style } 
&.nth-child(2) { //style } 
&.nth-child(3) { //style } 

और इतने पर ..

सीएसएस में किसी भी सीमा का भी करते हैं?

Answer 1

आप an+b प्रारूप में समीकरण के साथ :nth-child उपयोग कर सकते हैं (जहां एक पूर्णांक के साथ a और b की जगह और n0, 1, 2,.... होगा)।

li:nth-child(-n+10) { 
 
    color: red 
 
}

<ol> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
</ol>

---

अद्यतन: आप एक सीमा के भीतर तत्वों की जरूरत है तो कई :nth-child चयनकर्ता का उपयोग।

li:nth-child(n+5):nth-child(-n+10) { 
 
    color: red 
 
}

<ol> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
</ol>

Answer 2

नीचे टुकड़ा 2 से 3. यह आपकी आवश्यकता के लिए Tweak तक होती है करने के लिए सीएसएस लागू होता है।

स्पष्टीकरण:

nth-child(n+2) 2 तत्व से चयन शुरू होता है अग्रेषित करने के लिए। nth-child(-n+3) तीसरे तत्व से पीछे की तरफ से चयन करना शुरू करता है।

दो परिणामों को श्रृंखला में जोड़ना।

li:nth-child(n+2):nth-child(-n+3){ 
 
background: #000; 
 
color: #fff 
 
}

<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li>