☰

:nth-child() または :nth-of-type() を任意のセレクターと組み合わせることはできますか? 質問する

tag-icon • tag-icon css css-selectors
: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平私が探している 2 つの要素ではなく、"row" 要素が 1 つあります。 でも同じことが起こります:nth-of-type()。

誰かその理由を説明してくれませんか?

ベストアンサー1

新しい構文のサポートかなり良くなったので、以下を使用できます:

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

: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()、独立してお互いのサブセットセレクターの残りの部分と一致する要素。

これはまた、個々の複合セレクタ内の単純セレクタ間には順序の概念はない。1、つまり、たとえば次の 2 つのセレクターは同等です。

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

英語に翻訳すると、両方とも次の意味になります。

tr次の独立した条件のすべてに一致する要素を選択します。

  • 親の奇数番目の子である。
  • クラスは「行」であり、
  • tableこれは、クラス「myClass」を持つ要素の子孫です。

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

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

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

スクリプトを使用して要素をフィルタリングし、それに応じてスタイルや追加のクラス名を適用することもできます。たとえば、以下は jQuery を使用した一般的な回避策です (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]

異なるテクノロジーを使用したその他のソリューションについては、読者の課題として残しておきます。これは、説明のための簡単な例にすぎません。

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

2 これはもともと として提案されました:nth-match()が、要素をその兄弟要素のみと比較してカウントし、指定されたセレクタに一致する他のすべての要素と比較してカウントしないため、2014 年以降は既存の の拡張として再利用されています:nth-child()。

おすすめ記事