CSS `nth-of-type` を使用して位置とクラスの両方に基づいて要素を選択するにはどうすればよいですか?

CSS 3 nth-of-type: 特定のクラスに制限

CSS 3 の nth-of-type セレクターを使用すると、開発者は要素に基づいて要素を選択できます兄弟の中での自分の立場について。ただし、クラスに基づいて要素を選択する場合には、現時点では制限があります。

具体的には、nth-of-type は、要素の位置を決定するときに、クラスに関係なく、すべての兄弟要素を考慮します。これは、特定のクラスを持つ 3 つおきの要素を選択したい場合、nth-of-type だけではこれを実現できないことを意味します。

たとえば、提供された HTML では、クラスを持つ 3 つおきの要素を選択したいとします。 「.モジュール」。ただし、「.featured.module:nth-of-type(3n 3)」を使用すると、全体で 3 番目の兄弟でもあるため、「.featured.video」要素も選択されます。

解決策

残念ながら、CSS の現在の制限に従って、nth-of-type を a に制限する直接的な方法はありません。特定のクラス。回避策として、「.module3」や「.module6」などの一意のクラスを 3 つおきの「.module」要素に手動で追加することを検討できます。これにより、代わりに nth-of-type を使用して一意のクラスに基づいて選択できるようになります。

注: nth-of-class は CSS 3 では有効なセレクターではありません。なぜそれを解決策として使用できないのですか。

以上がCSS `nth-of-type` を使用して位置とクラスの両方に基づいて要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。