81

css3nth-of-typeをクラスに制限する方法はありますか? sectionレイアウトのニーズを指定するさまざまなクラスを持つ動的な数の要素があります。3rdごとに取得したいのです.moduleが、クラスの要素の型をnth-of-type調べてから型を計算しているようです。代わりに、s のみに制限したいと思い.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>

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;
  }​
4

2 に答える 2

77

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

于 2012-06-07T12:38:44.917 に答える
43

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

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

http://jsfiddle.net/w3af16dj/

于 2015-04-21T02:31:07.260 に答える