css3 nth loại bị giới hạn ở lớp

Question

Có cách nào để giới hạn sốcủa css3 cho một lớp học không? Tôi có số lượng động là section yếu tố với các lớp khác nhau chỉ định nhu cầu bố cục của họ. Tôi muốn lấy mọi thứ 3 .module, nhưng có vẻ như là nth-of-type tra cứu loại phần tử và sau đó tính toán loại. Thay vào đó, tôi muốn giới hạn chỉ với .module giây.

Cảm ơn!

JSFiddle để chứng minh: 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

Thật không may, không có cách nào (ít nhất là không có tôi biết) để chọn nth-of-type của một lớp, vì nth-of-class không tồn tại. Bạn có thể sẽ phải thêm một lớp mới vào mọi thứ ba .module theo cách thủ công.

Answer 2

Có vẻ như những gì bạn thực sự muốn là css4 :nth-match selector, nhưng nó không thực sự hỗ trợ trong hầu hết các trình duyệt, vì vậy hiện nay, cách duy nhất để làm điều đó là với javascript

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

http://jsfiddle.net/w3af16dj/