web-dev-qa-db-ja.com

クラスに制限されたタイプのcss3 n番目

Css3のnth-of-typeをクラスに制限する方法はありますか？レイアウトのニーズを指定するさまざまなクラスを持つ動的な数のsection要素があります。 3番目ごとに.moduleを取得したいのですが、nth-of-typeがクラス要素タイプを検索してからタイプを計算しているようです。代わりに、.modulesのみに制限したいと思います。

ありがとう！

実証する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;
  }​
csscss3css-selectorspseudo-class
68
technopeasant

残念ながら、nth-of-typeは存在しないため、クラスのnth-of-classを選択する方法はありません（少なくとも私の知る限り）。おそらく3つごとに新しいクラスを手動で追加する必要があります.module。

67
r0skar

本当に欲しいのは css4：nth-​​match selector のようですが、ほとんどのブラウザではまだ実際にはサポートされていないため、現在、それを行う唯一の方法はjavascriptを使用することです

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

http://jsfiddle.net/w3af16dj/

36
Eduardo Wada