सीएसएस पहले बच्चे 7 या अधिक बच्चों

Question

तो मैं last-child प्राप्त करने के लिए इस क्वेरी है जब जब वहाँ 7 या अधिक तत्वों

li:nth-last-child(7) ~ li:last-child { 
    background: red; 
} 

यह रूप में लंबे समय 7 की एक न्यूनतम है के रूप में तत्वों के किसी भी संख्या के लिए काम करता हैं । मैं क्या करना चाहता हूं विपरीत है, first-child प्राप्त करें।

मैं निम्नलिखित

li:nth-last-child(7) ~ li:first-child { 
    background: red; 
} 

की कोशिश की लेकिन वह काम नहीं करता। अजीब मैं निम्नलिखित

li:nth-last-child(7) ~ li:nth-child(2) { 
    background: red; 
} 

मैं जानता हूँ कि यह है बहुत जटिल सीएसएस का उपयोग कर दूसरे बच्चे तत्व प्राप्त कर सकते हैं, और यहां तक ​​नहीं संभव हो सकता है, लेकिन अगर यह किया जा सकता है मैं सोच रहा हूँ। यदि संभव हो तो मैं जेएस का उपयोग नहीं करना चाहूंगा। मुझे लगता है कि एक चुनौती के रूप में इस का इलाज;)

Answer 1

आप पहले तत्व का चयन कर सकते हैं जब वहाँ 7 या अधिक तत्वों नीचे चयनकर्ता का उपयोग करके कर रहे हैं:

div:first-child:nth-last-child(n+7) { 
    color: red; 
} 

स्पष्टीकरण:

• nth-last-child(n+7) - सभी का चयन करेंगे लेकिन पिछले सात बाल तत्व। जब सात से कम बच्चे होते हैं, तो यह किसी से मेल नहीं खाएगा।
• :first-child:nth-last-child(n+7) - केवल तत्व जो भी तत्व है जो अन्य भाग से मेल खाता के बीच पहला बच्चा है का चयन करेंगे (जो, केवल पहले बच्चे का चयन जब वहाँ सात या उससे अधिक बच्चे हैं)

.container > div:first-child:nth-last-child(n+7) { 
 
    color: red; 
 
}

<h3>Has seven children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div> 
 

 
<h3>Has six children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div> 
 

 
<h3>Has nine children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

Fiddle Demo

Answer 2

पहला तत्व है कि आप अपने सीएसएस में इस मॉडल के पहले इस्तेमाल कर सकते हैं के लिए। उदाहरण:

p:first-of-type { 
     background: #ff0000; 
    }