：nth-child（）または：nth-of-type（）を任意のセレクターと組み合わせることができますか？

116

任意のセレクターに一致する（または一致しない） 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私は1つで終わるので、関係なく、彼らは「行」クラスのしているかどうかの要素をも、「行」の要素の代わりに、私が探している2。同じことがでも起こり:nth-of-type()ます。

誰かが理由を説明できますか？

css css-selectors

— アタナミル
ソース

144

これは、方法:nth-child()と:nth-of-type()動作の誤解が原因で発生する非常に一般的な問題です。残念ながら、セレクターは奇数番号、偶数番号、または任意のan+bwhere a != 1やb != 0。これは、クラスセレクターだけでなく、属性セレクター、否定、および単純なセレクターのより複雑な組み合わせにも拡張されます。

: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()and などの疑似クラスを含む、特定の複合セレクターのすべての単純なセレクターは、残りのセレクターと一致する要素のサブセットを調べるのではなく、互いに独立して:not()機能します。

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

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

英語に翻訳すると、どちらも意味します：

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

親の奇数番号の子です。

クラス「行」があります。そして

これはtable、クラス「myClass」を持つ要素の子孫です。

^{（ここで、順序付けられていないリストを使用していることに気づくでしょう、ポイントを家に帰すためだけです）}

現在、純粋なCSSソリューションはないため、スクリプトを使用して要素をフィルタリングし、それに応じてスタイルまたは追加のクラス名を適用する必要があります。たとえば、次は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などの自動テストツールを使用している場合、またはlxmlなどのツールを使用してHTMLを処理している場合、これらのツールの多くではXPathを代替として使用できます。

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

異なるテクノロジーを使用する他のソリューションは、読者への課題として残されています。これは、説明のための簡単な、不自然な例です。

価値のあることとして、特定のセレクターに一致するn番目ごとの子を選択するという特定の目的のために、セレクターレベル4に記法の拡張を:nth-child()追加するという提案があります。²

一致をフィルタリングするセレクタはの引数として提供され:nth-child()ます。これも、既存のセレクタ構文で指定されているように、セレクタがシーケンス内で互いに独立して動作するためです。したがって、あなたの場合、それは次のようになります：

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

（抜け目のないリーダーはすぐにこれがあるべきことに注意します:nth-child(odd of tr.row)単純なセレクタから、代わりtrと:nth-child()同様に互いに独立して動作します。これは、セレクタを受け入れる機能擬似クラスの問題点の一つは、私は思いますワームの缶ですこの回答の真ん中には開かないでください。代わりに、ほとんどのサイトには、tr、テーブルボディ内の相互の兄弟要素としてため、どちらのオプションも機能的に同等ます。）

もちろん、まったく新しい仕様のまったく新しい提案であるため、これはおそらく数年後まで実装されません。それまでは、上記のようにスクリプトを使用する必要があります。

¹ _{タイプまたはユニバーサルセレクターを指定する場合は、最初に指定する必要があります。ただし、セレクターの基本的な動作は変わりません。それは構文上の癖に過ぎません。}

² _{これはもともととして提案され:nth-match()たものですが、指定されたセレクターに一致する他のすべての要素ではなく、その兄弟にのみ相対的な要素をカウントするため、2014年以降、:nth-child()代わりに既存の要素の拡張として再利用されています。}

— ボルトクロック
ソース

3

「（ここで、順序付けられていないリストを使用していることに気づくでしょう。要点を理解するために）」順序付けされた箇条書きと順序付けされていない箇条書きの使用について、より多くの人が故意に使ってほしいと思います。お返事ありがとうございます。

— 赤エンドウ

1

@The Red Pea：私の最大のHTMLペットのおしっこの1つ：「最高/最低から最低/最高の順に」：順序付けられていないリストが続きます。真剣に来るつもりですか？

— BoltClock

6

あんまり..

ドキュメントからの引用

:nth-child擬似クラスは+ b-1を有する要素と一致する文書ツリー内のその前の兄弟を与えられた正またはNのゼロ値のために、親要素を有しています。

それはそれ自身のセレクタであり、クラスと結合しません。あなたのルールでは、両方のセレクターを同時に満たす必要があるだけなので:nth-child(even)、.rowクラスもある場合はテーブルの行が表示されます。

— ガブリエレ・ペトリオーリ
ソース

0

nth-of-type同じタイプのエレメントのnth-childインデックスに従って機能しますが、兄弟エレメントのタイプに関係なく、インデックスに従ってのみ機能します。

例えば

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

上記のhtmlで、restクラスを持つすべての要素を非表示にしたいとします。

この場合nth-child、nth-of-typeすべての要素が同じ型である<div>ため、CSSは

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

または

.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
    display:none;
}

今、あなたは違いが何であるか疑問に思われる必要がありますnth-childし、nth-of-typeこのようにすることは違いあり

htmlが

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>

上記のhtmlでは、.rest要素のタイプは他の要素とは異なり、.rest段落とその他の要素はdivであるため、この場合nth-childは、次のように記述する必要があります。

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

しかし、あなたがタイプの CSS を使用する場合、 CSSはこれにすることができます

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}

.rest要素のタイプが<p>そうであるので、ここでnth-of-typeはのタイプを検出.restし、の1番目、2番目、3番目、4番目、5番目の要素にcssを適用しました<p>。

— ガウラフ・アガーワル
ソース

それは<tr>タグにとってどれほど役に立ちますか？

— Alexis Wilke

0

xpathでそれができるかもしれません。のようなもの//tr[contains(@class, 'row') and position() mod 2 = 0]はうまくいくかもしれません。クラスをより正確に照合する方法の詳細を拡張する他のSOの質問があります。

— the8472
ソース

0

これがあなたの答えです

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>

  <style>

    .block {
      background: #fc0;
      margin-bottom: 10px;
      padding: 10px;
    }
    /* .large > .large-item:nth-of-type(n+5) {
      background: #f00;
    } */

    .large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
      background: #f00;
    }

  </style>
</head>
<body>

<h1>Should be the 6th Hello Block that start red</h1>
<div class="small large">
  <div class="block small-item">Hello block 1</div>
  <div class="block small-item large-item">Hello block 2</div>
  <div class="block small-item large-item">Hello block 3</div>
  <div class="block small-item large-item">Hello block 4</div>
  <div class="block small-item large-item">Hello block 5</div>
  <div class="block small-item large-item">Hello block 6</div>
  <div class="block small-item large-item">Hello block 7</div>
  <div class="block small-item large-item">Hello block 8</div>
</div>

</body>
</html>

— ポケットニンジャ
ソース

0

nth-childの使用と非表示のタグのスキップに関するすべての質問は、このタグの複製としてリダイレクトされているように見えるので、ここではこれを残します。私はこのブログに出くわしましたhttps://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/それはnth-childに隠し要素を無視させる巧妙なcssアプローチを使用してい次のように：

次のCSSは、cpwクラスを持つ要素に関係なく、表示される2番目の各要素に右マージンを追加します。

.cpw {
    display:none;
}

.video_prewrap {
    margin-right:20px;
}

.video_prewrap:nth-child(2n) {
    margin-right:0;
}

.cpw ~ .video_prewrap:nth-child(2n) {
    margin-right:20px;
}

.cpw ~ .video_prewrap:nth-child(2n-1) {
    margin-right:0;
}

隠された要素を無視する質問のために、だまし跡をたどっている人を助けることを願っています！

— アイリッシュダブガイ
ソース

1

これに賛成票を投じたいのですが、機能するデモが必要です。

— Moob

私の記憶は、これは実際には最初に思われたほど堅牢ではなかったということです-私は今、トップ投票のコメントに行くでしょう、これは不可能です。

— IrishDubGuy

0

すべてのセレクターに同じ親クラスdocument.querySelector("main .box-value:nth-child(3) select.priorityOption"); がある場合document.querySelector("main .box-value select.priorityOption:nth-child(3)");は、そのクラスを使用します。ありがとうございました

<div class="card table">
    <div class="box">
        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>
    </div>
</div>

— ジャティン・アガーワル
ソース

：nth-​​child（）または：nth-​​of-type（）を任意のセレクターと組み合わせることができますか？

：nth-child（）または：nth-of-type（）を任意のセレクターと組み合わせることができますか？