CSS3 `nth-of-type` セレクターを特定のクラスに制限するにはどうすればよいですか?

nth-type CSS 3 セレクターをクラスに制限する

提供された例に見られるように、CSS 3 の nth-of-type セレクターは、ベースで動作します特定のクラスではなく、要素タイプに基づいて。これは、nth-of-type の選択を特定のクラスに制限したい場合に課題となる可能性があります。

nth-child を使用した代替アプローチ

since nth-of-クラスが存在しない場合、別の解決策は nth-child を使用することです。 n 番目の子セレクターは、親要素の子要素内の位置に基づいて要素を選択します。

変更された CSS は次のとおりです。

.featured.module:nth-child(3n+3) {
  padding-right: 0;
  background: red;
}

この改訂されたコードでは、n 番目の 3 番目ごとをターゲットとするのではなく、 of-type では、クラス「module」を持つ子要素を 3 つおきに選択しています。このアプローチでは、.module 要素を 3 つおきにスタイル設定するという望ましい効果が得られます。

手動クラスの追加

提供されたソリューションで説明されているように、別のオプションは、手動でクラスを追加することです。新しいクラスを 3 つおきの .module に追加します。この方法では、より多くの手動作業が必要になりますが、要素の選択をより細かく制御できるようになります。

それに応じて CSS を変更することを忘れないでください。

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

以上がCSS3 `nth-of-type` セレクターを特定のクラスに制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。