[解決済み] nth-child()や:nth-of-type()と任意のセレクタを組み合わせることはできますか？

質問

すべてのn番目の子プロセスを選択する方法はありますか？ にマッチする（あるいはマッチしない）、任意のセレクタ ? たとえば、私はすべての奇数テーブル行を選択したいのですが、行のサブセット内で。

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

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

しかし :nth-child() をカウントしているようにしか見えません。 tr 要素を数えるようです。 であっても 要素で終わってしまいます。同じことが :nth-of-type() .

誰か理由を説明してください。

どのように解決するのですか？

これは非常によくある問題で、以下のような誤解から発生します。 :nth-child(An+B) と :nth-of-type() の働きをします。

セレクタレベル3では :nth-child() 擬似クラス の中で要素を数える。 すべて の中で要素を数えます。セレクタの残りの部分にマッチする兄弟要素だけをカウントするわけではありません。同様に :nth-of-type() 擬似クラス は、同じ要素タイプを共有する兄弟をカウントします。これは、セレクタの残りの部分ではなく、HTMLのタグ名を参照します。

これはまた、同じ親のすべての子が同じ要素タイプである場合、例えば、テーブル本体の子だけが tr 要素やリスト要素の子要素が li 要素である場合 :nth-child() と :nth-of-type() は同じように動作します。つまり、An+B のすべての値に対してです。 :nth-child(An+B) と :nth-of-type(An+B) は同じ要素の集合にマッチします。

実際には、与えられた複合セレクタの中の全ての単純なセレクタは、以下のような擬似クラスも含みます。 :nth-child() と :not() は、仕事 独自に を見るのではなく、互いに サブセット を見るのではなく、セレクタの残りの部分によってマッチする要素のサブセットを見るのです。

これはまた、次のことを意味します。 個々の複合セレクタ内の単純なセレクタの間には、順序の概念はありません。 ¹ であり、例えば以下の2つのセレクタは等価であることを意味します。

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

英語に訳すと、どちらも

任意のものを選択する tr 要素で、以下の独立した条件の全てにマッチするものを選んでください。

• 親要素の奇数番目の子要素である。
• クラス "row"を持っています。
• の子孫である。 table 要素の子孫で、クラス "myClass" を持っています。

^{(ここで私が順序なしリストを使用していることにお気づきでしょう。ポイントを強調するためです)}

セレクタレベル 4 は、この制限を是正するために :nth-child(An+B of S) ² で、任意のセレクタ引数 S を受け入れることができます。これも、既存のセレクタ構文で指示されているように、セレクタが複合セレクタで互いに独立して動作する方法のためです。つまり、あなたの場合、次のようになります。

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

もちろん、新しい仕様の新しい提案であるため、これはおそらく 数年先まで .

それまでの間は、スクリプトを使用して要素をフィルタリングし、それに応じてスタイルまたは余分なクラス名を適用する必要があります。たとえば、以下は jQuery を使用した一般的な回避策です (入力される行グループが 1 つだけであることを想定し、その行グループには tr 要素で構成される行グループが 1 つだけあると仮定します)。

$('table.myClass').each(function() {
  // Note that, confusingly, jQuery's filter pseudos are 0-indexed
  // while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

対応するCSSで

table.myClass tr.row.odd {
  ...
}

Seleniumなどの自動テストツールやBeautifulSoupなどのツールでHTMLをスクレイピングしている場合、これらのツールの多くはXPathを代替手段として認めています。

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

別の技術を使用した他のソリューションは、読者への練習として残されています。これは、説明のための簡単な、工夫された例に過ぎません。

¹ _{型またはユニバーサルセレクタを指定する場合、それが最初に来なければなりません。しかし、これはセレクタが基本的にどのように動作するかを変えるものではなく、構文の癖以外の何物でもありません。}

² _{これは元々 :nth-match() として提案されましたが、与えられたセレクタにマッチする他の全ての要素ではなく、兄弟要素のみを相対的にカウントするため、2014 年現在では、既存の :nth-child() の拡張として再利用されています。}