सीएसएस एनएच-चाइल्ड चेकर्ड

Question

मैं divs के पृष्ठभूमि रंग बदलने के लिए nth-child का उपयोग करने की कोशिश कर रहा हूं। नीचे एक पृष्ठभूमि है कि मैं पृष्ठभूमि रंग कैसे बदलना चाहता हूं। मैं एनएच-बच्चे के साथ ऐसा कैसे करूं?

प्रत्येक बॉक्स 25% चौड़ाई होना चाहिए की यह पैरेंट कंटेनर है।

Answer 1

इस मामले में आपको :even और :odd, इस्तेमाल कर सकते हैं:

div:nth-child(even) { 
    background-color:grey; 
} 

div:nth-child(odd) { 
    background-color:black; 
} 

jsFiddle here

Answer 2

यह सिर्फ संभव हो सकता है प्रकट नहीं होता है - आपको बस इतना करना परिवर्तन के सापेक्ष उनका उपयोग करना होगा क्या होगा जिस क्रम में रंग लागू होते हैं, उस पर निर्भर करता है कि आप किस पंक्ति पर हैं, लेकिन आप केवल अतिरिक्त या घटाव कर सकते हैं - यहां बताया गया है - nth-child with mod (or modulo) operator

वैकल्पिक समाधान:

1. एक div में प्रत्येक "पंक्ति" लपेटें ताकि आप प्रत्येक अन्य पंक्ति को अलग-अलग कह सकें कि ग्रे को पहले बनाम काला आना चाहिए।
2. उन तत्वों के माध्यम से लूप करने के लिए जेएस का उपयोग करें जहां आप मॉड्यूलस का उपयोग कर सकते हैं, और कक्षा को पर प्रत्येक अन्य पंक्ति में जोड़ें और पृष्ठभूमि रंगों को लागू करने के तरीके को फ़्लिप करें।
3. 2 की तरह, को छोड़कर सिर्फ कोड में तत्वों पर कक्षाएं डाल पेज लोड होने से पहले

संपादित करें: के बाद से यह एक दोहराई जाने वाली पद्धति है हर 8 divs बस महसूस किया कि मैं पूरी तरह से गलत था, तो आप ऐसा कर सकता है हर 4 के बजाय। बेशक, इससे पहले कि मैं एक साथ समाधान कर सकता हूं, एंडी ने मुझे पंच पर मार दिया। Touche - अच्छा काम!

Answer 3

यह सुनिश्चित नहीं है कि यह आपकी समस्या का सबसे सुंदर समाधान है, लेकिन पंक्ति में समूह div से div का उपयोग करके, मैं अजीब और यहां तक ​​कि पंक्ति को सॉर्ट करने में सक्षम था, और शैली को अपने अजीब या यहां तक ​​कि बच्चे को लागू करने में सक्षम था। चूंकि यह 8 तत्वों के ऊपर एक दोहराई जाने वाली पद्धति है http://jsfiddle.net/3ASE8/

#div_parent { 
    width: 500px; 
} 
.child { 
    display: inline-block; 
    margin: 5px; 
    width: 100px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
    background-color: #333; 
    color: red; 
} 

.row:nth-child(odd) .child:nth-child(even) { 
background-color: #ccc!important;  
} 
.row:nth-child(even) .child:nth-child(odd) { 
background-color: #ccc!important;  
} 

Answer 4

, तो आप उसका प्रयोग सीएसएस बनाने के लिए कर सकते हैं::

यहाँ एक नजर डालें

div:nth-child(8n+1), 
div:nth-child(8n+3), 
div:nth-child(8n+6), 
div:nth-child(8n) { 
    background-color:black 
} 
div:nth-child(8n+2), 
div:nth-child(8n+4), 
div:nth-child(8n+5), 
div:nth-child(8n+7) { 
    background-color:gray 
} 

फिडल: http://jsfiddle.net/RvbsL/2/