:nth-child() または :nth-of-type() を任意のセレクターで使用することはできますか?

Question

任意のセレクターに一致する (または一致しない) n 番目の子要素 ​​ を選択する方法はありますか?たとえば、行のサブセット内の奇数のテーブル行をすべて選択したいとします。

リーリー リーリー

しかし、:nth-child() は、クラス "row" であるかどうかに関係なく、すべての tr 要素をカウントするだけのようです。そのため、最終的には even になります。 探している 2 つの要素の代わりに「row」要素を使用します。 :nth-of-type() 同じことが起こります。

理由を説明できる人はいますか?

Answer 1

＃＃＃本当じゃない..＃＃＃

ドキュメントから引用

これは独自のセレクターであり、クラスとは結合されません。ルールでは、両方のセレクターを満たす必要があるため、

:nth-child(even)

テーブル行にも .row クラスが含まれている場合のみ必要です。

Answer 2

これは、:nth-child(An B) と :nth-of-type() の仕組みについての誤解から生じる、非常に一般的な質問です。#​​

##レベル 3 セレクターでは、

:nth-child () pseudo-class は、同じ親の下にある すべての 兄弟要素をカウントします。セレクターの残りの部分と一致する兄弟だけをカウントするわけではありません。

同様に、

:nth-of-type() 擬似クラス 同じ要素タイプを共有する兄弟要素をカウントします。これは、HTML 内のタグ名ではなくタグ名を参照します。残りのセレクター。

これは、同じ親のすべての子が同じ要素タイプを持つ場合、たとえばテーブル本体の唯一の子が

tr 要素であるか、リスト要素の唯一の子が であることも意味します。子要素が li 要素の場合、:nth-child() と :nth-of-type() は同じように動作します。つまり、各値 An B に対して、 :nth -child(An B) と :nth-of-type(An B) は、同じ要素セットに一致します。 p>実際には、特定の複合セレクター内のすべての単純なセレクター (

:nth-child() や :not() などの疑似クラスを含む) は機能します セレクターの残りの部分と一致する要素の subset を調べるのではなく、互いに独立して します。

これは、

個々の複合セレクター 1 ^{内の単純なセレクター間に順序の概念がないことも意味します。これは、たとえば、次の 2 つのセレクターが以下と同等であることを意味します:} リーリー p> 英語に翻訳すると、すべて次の意味になります:

(要点をわかりやすくするために、ここでは順序なしリストを使用していることに気づくでしょう)

セレクター レベル 4 は、

:nth-child(An B of S)2 ^{が任意のセレクター引数 S を受け入れることを許可することで、この制限を修正しようとします。これは、これは、以下に示す既存のセレクター構文によって決定されるように、複合セレクター内のセレクターが互いに独立して動作する方法にも起因します。したがって、あなたの場合、次のようになります:} リーリー

もちろん、これは新しい仕様における新しい提案として、