css3 nth प्रकार के वर्ग

Question

तक सीमित है क्या सीएसएस 3 के nth-of-type को कक्षा में सीमित करने का कोई तरीका है? मुझे section तत्वों की एक गतिशील संख्या मिली है जिसमें विभिन्न लेआउट की आवश्यकता है जो उनकी लेआउट आवश्यकताओं को निर्दिष्ट करते हैं। मैं हर तीसरे .module को पकड़ना चाहता हूं, लेकिन ऐसा लगता है कि nth-of-type कक्षा तत्व प्रकार को देखता है और फिर प्रकार की गणना करता है। इसके बजाय मैं इसे केवल .module एस तक सीमित करना चाहता हूं।

धन्यवाद!

JSFiddle प्रदर्शित करने के लिए: http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

<section class="featured video"> 
    <h1>VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO (3)</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO (6)</h1> 
</section> 

सीएसएस:

.featured { 
    width:31%; 
    margin:0 0 20px 0; 
    padding:0 3.5% 2em 0; 
    float:left; 
    background:#ccc; 
} 
    .featured.module:nth-of-type(3n+3) { 
    padding-right:0; 
    background:red; 
    } 
    .featured.video { 
    width:auto; 
    padding:0 0 2em 0; 
    float:none; 
    }​ 

Answer 1

दुर्भाग्य से, वहाँ कोई रास्ता नहीं है (कम से कम कोई भी मैं के बारे में पता) की nth-of-type चयन करने के लिए है एक वर्ग, nth-of-class मौजूद नहीं है। आपको शायद हर तीसरे .module मैन्युअल रूप से एक नई कक्षा जोड़नी होगी।

Answer 2

ऐसा लगता है कि तुम क्या वास्तव में चाहते हैं css4 :nth-match selector है, लेकिन यह वास्तव में सबसे ब्राउज़र में समर्थित अभी तक है, तो वर्तमान में, यह करने के लिए एक ही रास्ता जावास्क्रिप्ट

$(".featured.module").filter(function(index, element){ 
    return index % 3 == 2; 
}).addClass("third"); 

http://jsfiddle.net/w3af16dj/