css3 nth des Typs beschränkt auf Klasse

Question

Gibt es eine Möglichkeit, css3 nth-of-type auf eine Klasse zu begrenzen? Ich habe eine dynamische Anzahl von section Elementen mit verschiedenen Klassen, die ihre Layout-Bedürfnisse angeben. Ich würde gerne jeden 3. .module greifen, aber es scheint, dass nth-of-type Klassen Elementtyp sucht und dann den Typ berechnet. Stattdessen möchte ich es nur auf .module s beschränken.

Danke!

JSFiddle zu demonstrieren: 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> 

CSS:

.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

Leider gibt es keine Möglichkeit (zumindest keine, die ich kenne) wählen nth-of-type von eine Klasse, da nth-of-class nicht existiert. Wahrscheinlich müssen Sie jeder dritten .module manuell eine neue Klasse hinzufügen.

Answer 2

Es scheint Sie wirklich, was will, ist die css4 :nth-match selector, aber es noch in den meisten Browsern nicht wirklich unterstützt wird, so zur Zeit der einzige Weg, um es mit Javascript

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

http://jsfiddle.net/w3af16dj/