CSS `nth-of-type` を使用して、3 つおきの要素を特定のクラスでターゲットにするにはどうすればよいですか?

CSS 3 nth of type Restricted to Class

nth-of-type セレクターを使用すると、特定の型の n 番目ごとの子を選択できます。ただし、この選択を特定のクラスに制限するのは難しい場合があります。

問題:

マークアップに関係なく、3 つおきの .module 要素を動的にターゲットにしたいと考えています。 。ただし、nth-of-type はクラスではなく要素の型に基づいて計算されます。

解決策:

現時点では、nth-of を制限する直接的な方法はありません。 -type を特定のクラスに指定します。回避策の 1 つは、追加のクラスを 3 つおきの .module 要素に手動で追加することです。

たとえば、提供された HTML:

<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (3)</h1>
</section>

<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (6)</h1>
</section>

次に、次の CSS スタイルを適用します。

.featured.module.third {
  padding-right: 0;
  background: red;
}

これにより、.module クラスの 3 番目の出現ごとに、追加の .third を使用してスタイルが設定されます。 class.

注:

この回避策では、.module 要素を追加または削除するときに手動でメンテナンスが必要です。より高度なシナリオの場合は、JavaScript または CSS プリプロセッサを使用して必要なクラスを自動的に生成することを検討してください。

以上がCSS `nth-of-type` を使用して、3 つおきの要素を特定のクラスでターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。