CSS `nth-of-type` は特定のクラスに基づいて要素を選択できますか?

CSS 3 の n 番目の型はクラスに制限できますか?

CSS 3 では、n 番目の型セレクターを使用できます類似した要素のグループ内での位置に基づいて特定の要素を選択します。ただし、このセレクターでは、クラスに基づいて要素をターゲットにすることはできません。

質問:

nth-of-type を特定のクラスに適用することは可能ですか?たとえば、クラス .module を使用して 3 つおきの要素をターゲットにするにはどうすればよいですか?

答え:

残念ながら、CSS には組み込みの nth-of-クラスセレクター。これは、nth-of-type を特定のクラスに直接制限することはできないことを意味します。

解決策:

目的の効果を実現するには、新しいclass を 3 つおきの .module に手動で追加します。これは、JavaScript または Sass などのプリプロセッサを使用して実行できます。

JavaScript を使用した例は次のとおりです:

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

追加のクラスが適用されたら、次の CSS ルールを使用してターゲットを設定できます。 3 つおきの .module:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

この回避策は、専用の n 番目のクラスほど洗練されていない可能性があります。セレクターを使用すると、既存の CSS 機能と JavaScript を使用して目的の機能を実現できます。

以上がCSS `nth-of-type` は特定のクラスに基づいて要素を選択できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。