css3 nth типа, ограниченного классом [дубликат]

этот вопрос уже есть ответ здесь:

есть ли способ ограничить css3 nth-of-type классу? У меня есть динамическое число section элементы с различными классами, обозначающими их потребности в макете. Я хотел бы захватить каждый 3-й .module, но, кажется,nth-of-type ищет тип элемента classes, а затем вычисляет тип. Вместо этого я хотел бы ограничить его только .module s.

спасибо!

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>

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;
  }​
2 62
css css3 css-selectors pseudo-class

2 ответа:

к сожалению, нет способа (по крайней мере я не знаю), чтобы выбрать nth-of-type класса, так как nth-of-class не существует. Вам, вероятно, придется добавить новый класс к каждому третьему .module вручную.

62

похоже, что вы действительно хотите это css4: nth-match selector, но он еще не поддерживается в большинстве браузеров, поэтому в настоящее время единственный способ сделать это-с помощью javascript

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

http://jsfiddle.net/w3af16dj/

32