सीएसएस एनएच-बच्चे और कक्षाएं

Question

मुझे सीएसएस एनएच-बाल चयनकर्ता के साथ समस्या है। मेरे पास कंटेनर के अंदर 3x3 elemtens का ग्रिड है। उन तत्वों में .square नामक एक वर्ग है। .square:nth-child(3n+1) के साथ मैं पंक्ति के हर पहले तत्व का चयन करता हूं और इसे हरा रंग देता हूं। .square:nth-child(3n+3) के साथ मैं पंक्ति के हर अंतिम तत्व का चयन करता हूं और इसे लाल रंग देता हूं।

यह ठीक काम करता है, जब तक कोई तत्व नहीं है (उदाहरण के लिए <br>) जिसे ग्रिड से पहले आउटपुट किया जाता है। प्रत्येक नए <br> के साथ, ऑर्डर एक से बढ़ता है, जैसा कि <br> को .square माना जाता था।

जैसा कि मैं .nth-child समझता हूं, इसे .square कक्षा के प्रत्येक तीसरे तत्व का चयन करना चाहिए। यह किसी भी तत्व के लिए क्यों लागू होता है, और मैं अपने प्रारंभिक लक्ष्य को कैसे प्राप्त कर सकता हूं?

अग्रिम

http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728

समस्या धन्यवाद बीच में बॉक्स पर होता है।

Answer 1

लगता है जैसे आप nth-of-type चाहते हैं।

संबंधित चयनकर्ता जो आप उपयोगी पा सकते हैं :first-of-type, :last-of-type, :nth-last-of-type और :only-of-type हैं।

Answer 2

वें वाले बच्चे एचटीएमएल तत्व के साथ ही काम कर रहे, n वें वाले बच्चे सीएसएस,, वर्ग और आईडी नहीं जानते कि तुम वर्ग के लिए n वें वाले बच्चे सेट करना चाहते हैं, तो jQuery का उपयोग कर उस वर्ग के लिए कुछ कस्टम विशेषता जोड़ने ..

जैसे

jQuery('.square:nth-child(3n+3)').attr("act","dummy"); 

तो का उपयोग सीएसएस

div[act='dummy']{ 
border : 1px solid red;}