任意のセレクターと組み合わせることができる方法は、疑似クラス :nth-child() または :nth-of-type() で別のセレクターを使用することです。

Question

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

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>行
  <tr class="row"> <!-- これが欲しい -->
    <td>行
  <tr class="行">
    <td>行
  <tr class="row"> <!-- そしてこれ -->
    <td>行
</テーブル>

しかし、:nth-child() は、タイプが「row」であるかどうかに関係なく、すべての tr 要素をカウントするだけのようです。取得したのは 1 つの even "row" 要素であり、探している 2 つの要素ではありません。同じことが :nth-of-type() でも起こります。

誰か理由を説明できますか?

Answer 1

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

ドキュメントからの引用

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

:nth-child(even)

テーブル行にも .row クラスがある場合、それが表示されます。

Answer 2

これは非常によくある質問で、:nth-child(An B) と :nth-of-type() の動作方法についての誤解が原因です。

セレクター レベル 3 では、:nth-child()擬似クラスは、単に一致する兄弟要素であるかだけでなく、同じ親要素の下にあるすべての兄弟要素間の位置を計算します。残りのセレクター。

同様に、 :nth-of-type()pseudoclass は、HTML のインジケータ シグネチャである同じ要素タイプを共有する兄弟要素を計算します。残りの要素は計算しません。セレクタ。

これは、同じ親要素のすべての子要素が同じ要素タイプである場合、たとえば、テーブル本体に tr 要素のみがあるか、リスト要素に li# のみがあることも意味します。 ## 要素、:nth-child() と :nth-of-type() の動作は同じになります。つまり、An B の各値に対して :nth-child( An B) と :nth-of-type(An B) は、同じ要素セットに一致します。

実際には、

:nth-child() や :not() などの疑似クラスを含む、特定の複合セレクター内のすべての単純なセレクターは、 スタンドアロンです。 は、セレクターの残りの部分と一致する 要素の サブセットを調べる代わりに機能します。

これは、

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

英語に翻訳すると、すべて次の意味になります:

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

セレクター レベル 4 は、

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

もちろん、まったく新しい仕様でのまったく新しい提案であるため、これは

数年後まで実装されない可能性があります。

それまでの間、スクリプトを使用して要素をフィルタリングし、それに応じてスタイルまたは追加のクラス名を適用する必要があります。たとえば、jQuery を使用した一般的な回避策は次のとおりです (テーブルに

tr 要素を含む行グループが 1 つだけあると仮定します)。 リーリー に対応する CSS は次のとおりです:

リーリー

Selenium などの自動テスト ツールを使用している場合、または BeautifulSoup などのツールを使用して HTML を解析している場合、これらのツールの多くでは代替として XPath を使用できます。 リーリー

さまざまなテクニックを使用した他の解決策は、読者の演習として残しておきますが、これは単に簡単で意図的な例にすぎません。

1

---

タイプまたはユニバーサル セレクターを指定する場合は、それを最初に指定する必要があります。ただし、これはセレクターの基本的な動作を変更するものではなく、単なる構文の癖に過ぎません。 2

当初提案されたのは ^:nth-match() でしたが、これは依然として、指定されたセレクターを満たす要素ではなく、兄弟に関連する要素のみを計算するためです。したがって、2014 年以降、既存の _{:nth-child() の拡張機能として再利用されています。}