BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】よく使われるnth-childセレクタをまとめる

2022-01-15 03:33:33

前文

フロントエンドのプログラミングでは、奇数、偶数などの数値も受け付けるnth-childセレクタをよく利用します。4n+1、-2n+1などの式も受け取れることを、CSS Masteryの本に目を通して思い出したのは今日になってからだ。では、それぞれ具体的にどのような使い方があるのでしょうか。適用できるシナリオは？あまりはっきりしないかもしれないので、以下の例にしたがって理解していこう。 

<body>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
</body>

nth-child(偶数)とnth-child(奇数)

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

<style type="text/css">
    a:nth-child(even){/*Even-numbered fonts are red*/
        color: red;
    }
    a:nth-child(odd){/ /* odd font size is 30px*/
        font-size: 30px;
    }
</style>

また、ブラウザで確認すると、以下のように期待通りに動作していることがわかります。

第ニ子(1)

1つの要素を選択し、要素は1から数えて与えられた値に基づいてマッチする、次のようなものが最も一般的であるはずです。 

<style type="text/css">
    a:nth-child(3){/*selects the third element's data for processing*/
        color: red;
        font-size: 30px;
    }
</style>

結果も期待通りです。

第n子(2n+1)

この表現形式は露出が少ないのですが、どのようにすればよいのでしょうか。実際には、彼はまた、非常に単純な、ちょうど0からnを数え、その後、ドキュメントに一致するように式全体の値を計算し、成功した一致がない場合は、停止する 例えば、n番目の子（2n +1）は、n = 0、2n +1 = 1、そこに一致し続け、現在のドキュメントに一致させる方法です。n = 1、2n +1 = 3、も存在する、n = 2、2n +1 = 5、まだ存在する、n = 3、2n +1 = 7、一致しない。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の構造が以下のように変化したときに確認できます。 

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

pタグが余分にあるのがわかると思います。では、次のようなcssスタイルを追加するとどうなるでしょうか。 

<style type="text/css">
    a:nth-child(2){
        color: red;
        font-size: 30px;
    }
</style>

a2が赤くなって大きくなったという人も多いかと思いますが、本当にそうでしょうか？結果を見てください。

結果は変わりません、なぜでしょうか？a:nth-child(2)はaタグと親要素の2番目の子要素の両方を参照しているからです。この構造では、親要素の2番目の子要素であるp1に対応するタグが参照されるでしょう。では、a2が赤く大きくなるにはどうしたらよいのでしょうか。ここで、我々は混乱a:nth-of-type(2)を導入しなければならない、彼はすべてのa要素で親要素のaタグと第二子要素の両方を参照しているので、それは私が望むものとは正確ではありません？結果は我々が望むものであるかどうかを見てみましょう？ 

<style type="text/css">
    a:nth-of-type(2){
        color: red;
        font-size: 30px;
    }
</style>

それが私たちの望みです。

概要

まず、nth-childの様々な値をまとめ、単一の値は1からカウントされ、数値式の場合はnは0からカウントされることに注目します。

nth-of-typeは現在指定されている型の要素内でソートするのに対し、nth-childはすべての要素でソートするという紛らわしい方法を導入しました。

nth-childセレクタの記事では、一般的なnth-childセレクタについてまとめています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します