よく使われるn番目の子セレクターをまとめる

序文

フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-child セレクターをよく使用します。今日、Mastering CSS という本を読んでいたときに、4n+1、-2n+1 などの式も受け入れることができることを思い出しました。では、具体的な用途は何でしょうか?適用可能なシナリオは何ですか?まだよくわからないかもしれませんので、以下の例を詳しく見てみましょう。HTML 構造は次のとおりです。

<本文>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
</本文>

n番目の子(偶数)とn番目の子(奇数)

これは非常によく使用される変数で、それぞれ偶数と奇数を表します。

<スタイル タイプ="text/css">
    a:nth-child(even){/*偶数フォントは赤*/
        色: 赤;
    }
    a:nth-child(odd){/*奇数のフォントサイズは30pxです*/
        フォントサイズ: 30px;
    }
</スタイル>

ブラウザをチェックしたところ、次のように予想どおりであることがわかりました。

n番目の子(1)

単一の要素を選択すると、その要素は指定された値に従って照合されます。1 から数えて、次のように最も一般的な値になります。

<スタイル タイプ="text/css">
    a:nth-child(3){/*処理対象として3番目の要素のデータを選択する*/
        色: 赤;
        フォントサイズ: 30px;
    }
</スタイル>

結果は予想通りでした:

n番目の子(2n+1)

この表現形式はあまり使用されません。どのように扱えばよいでしょうか?実際、これも非常に簡単です。n を 0 から数え、式全体の値を計算し、ドキュメントを一致させて、一致するものがない場合は停止します。たとえば、nth-child(2n+1) は現在のドキュメントとどのように一致するでしょうか。n=0、2n+1=1 のとき、存在する場合は一致し続けます。 n=1、2n+1=3 の場合も存在します。n=2、2n+1=5 の場合もまだ存在します。n=3、2n+1=7 の場合、一致させることができなくなりました。したがって、機能する要素は行 1、3、5 になります。ブラウザーの結果が予想どおりかどうか確認してみましょう。

案の定、1、3、5しかありません

-n、たとえば -n+2 の場合は、実際には同様です。n=0、-n+2=2 の場合、一致が継続します。n=1 の場合、-n+2=1 がまだ存在します。n=0、-n+2=0 が存在しない場合は、一致が終了します。したがって、機能する要素は行 1 と 2 になります。結果を見てみましょう。

これを使用して、最初のいくつかの要素を一致させることができます。もちろん、一致できる要素は、設計する式によって異なります。

上記とよく混同される拡張機能: nth-of-type

:nth-of-type は上記と似た値を持っていますが、違いは何でしょうか?ページ要素が複雑になると、それが表示されます。次のように HTML 構造を変更します。

<本文>
    <a>a1</a>
    <p>p1</p>
    <a>a2</a>
    <p>p2</p>
    <a>a3</a>
    <p>p3</p>
    <a>a4</a>
    <p>p4</p>
</本文>

ここには追加の p タグがあることがわかります。次の CSS スタイルを追加するとどうなるでしょうか?

<スタイル タイプ="text/css">
    a:n番目の子(2){
        色: 赤;
        フォントサイズ: 30px;
    }
</スタイル>

a2 が赤くなって大きくなると言う人も多いと思いますが、本当にそうなのでしょうか?結果を見てみましょう:

結果は変わりません。なぜでしょうか? a:nth-child(2) は a タグと親要素の 2 番目の子要素の両方を参照するためです。この構造では、親要素の 2 番目の子要素は p1 に対応するタグである必要があります。では、a2 を赤く大きくするにはどうすればよいでしょうか?ここで、混乱を招く a:nth-of-type(2) を導入する必要があります。これは、すべての a 要素のうち、a タグと親要素の 2 番目の子要素の両方を参照するためです。これはまさに私が望んでいることではないでしょうか。結果が期待通りのものかどうか見てみましょう。

<スタイル タイプ="text/css">
    a:n番目の型(2){
        色: 赤;
        フォントサイズ: 30px;
    }
</スタイル>

これが私たちの考えです。

まとめ

まず、nth-child のさまざまな値をまとめます。単一の値は 1 からカウントが開始されることに注意してください。数値式の場合は、n は 0 からカウントが開始されます。

紛らわしいnth-of-typeを導入しました。nth-of-typeは現在指定された要素の型内の順序を参照しますが、nth-childはすべての要素間の順序を参照します。

よく使われるnth-childセレクターについてまとめたこの記事はこれで終わりです。nth-childセレクターについてさらに詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。