सीएसएस: nth-of-type() और: नहीं() चयनकर्ता?

Question

मैंने लेखों को तरफ से 25% चौड़ा कर दिया है। मैं प्रत्येक चौथे तत्व के बाद clear:both जोड़ रहा हूं। हालांकि मुझे तत्वों के बीच एक ग्राफिकल सेक्शन-ब्रेक डालना होगा। और यह <ul> के अंदर होना चाहिए। वैध होने के लिए मैंने <li> में "सेक्शन-ब्रेक" (नीचे नमूने में पहला ली आइटम) भी लपेट लिया।

<ul> 
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
</ul> 

मैं हर चौथे तत्व एक लाइन ब्रेक तो मैं का उपयोग होना चाहता हूँ ...

ul li:nth-of-type(4n+1) { clear: both; } 

हालांकि मैं li.year इस व्यवहार से प्रभावित होने नहीं तो मैं इस

ul li:not(.year):nth-of-type(4n+1) { clear: both; } 

की कोशिश की चाहते हैं

अभी मेरे पिछले नमूने कोड में अंतिम <li> अगली पंक्ति में तैनात है, लेकिन ऐसा नहीं होना चाहिए क्योंकि पहले <li> फ़्लोट में से एक नहीं है डी लेख लेकिन एक शीर्षक है।

क्या :not और nth-of-type() चयनकर्ता एक-दूसरे पर स्टैक करना संभव है?

Answer 1

चयनकर्ता आपके पास -

ul li:not(.year):nth-of-type(4n+1) { background: yellow; } 

- पूरी तरह से सही है (as shown by highlighting the selector)।

समस्या यह है कि आप clear का उपयोग कैसे कर रहे हैं। यह काम करता है अगर आप clear:right का उपयोग करें, और उसके बाद clear:left निम्नलिखित तत्व पर:

टिप्पणी प्रति

ul li:not(.year):nth-of-type(4n+1) { clear: right; } 
ul li:not(.year):nth-of-type(4n+2) { clear: left; } 

संपादित त्रस्त बाहर पाठ बकवास है। बोल्टक्लॉक के जवाब के अनुसार असली मुद्दा यह है कि :not छद्म-वर्ग nth-of-type को प्रभावित नहीं करता है। चयनकर्ता ऑफसेट को इस मामले में संयोग से समायोजित करना, लेकिन काम नहीं करेगा अगर :not पैटर्न अलग था।

ul li:not(.year):nth-of-type(4n+2) { clear: left; } 

http://jsfiddle.net/8MuCU/

Answer 2

कारण अपने :not() काम करने के लिए है, क्योंकि li.year अपने li तत्वों (स्वाभाविक रूप से) के आराम के रूप में एक ही तत्व प्रकार की है प्रकट नहीं होता है, तो :nth-of-type(4n+1).year वर्ग की परवाह किए बिना एक ही तत्व से मेल खाता है।

चयनकर्ताओं को अनुक्रमिक रूप से ढेर करना संभव नहीं है। यह सिर्फ इतना नहीं है कि वे कैसे काम करते हैं।

जब से तुम क्योंकि HTML मार्कअप नियमों के कुछ और करने के लिए अपने li तत्वों को बदल नहीं सकते, और :nth-match() एक future spec में है और अभी तक लागू नहीं किया गया, तो आप अपने :nth-of-type() सूत्र बदलते संरचना को समायोजित करने के साथ क्या करना है बजाय:

ul li:not(.year):nth-of-type(4n+2) { clear: both; }