(113) 配列要素には CSSの :nth-childが便利みたいだ。

投稿者: | 2022年2月28日

163 views

1. 知ったこと

恥ずかしながら :nth-child という書き方を知らなかった。
CSSを書くときに、配列要素に対してその序数で指定が出来るのだそうな。

2. 実際に使ってみる

こんなコードを書いてみた。
<p> を 3個並べている。すなわち <p> が3個の配列だ。

index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>1 RED</p>
    <p>2 GREEN</p>
    <p>3 BLUE</p>
  </body>
</html>

序数は 1始まり なので注意すること。 0始まりではない。
style.css

p:nth-child(1){ color:#f00 }
p:nth-child(2){ color:#0f0 }
p:nth-child(3){ color:#00f }

このページを開くと、意図した通りに色分けされている。クラスやIDで区別しなくてもよいのが楽だ。
https://www.dogrow.net/hp/sample/00113/

いろいろな場面で使えそうだ!

でも…
pの前に imgを書いてみたところ…

index2.html

<body>
  <img src="./img.jpg">
  <p>1 RED</p>
  <p>2 GREEN</p>
  <p>3 BLUE</p>
</body>

あれっ!
こうなってしまう…
imgを挿入したことにより、後続の要素に適用されるものが一つずつずれてしまった。
https://www.dogrow.net/hp/sample/00113/index2.html

pに繋げて書いたから、pだけをカウントしてくれる
と勘違いしていました…

よく調べてから追記しようっと。

3. SCSSで使う場合の注意

こんな書き方は NGだ。
style.scss

p{
  :nth-child(1){ color:#f00 }
  :nth-child(2){ color:#0f0 }
  :nth-child(3){ color:#00f }
}

この場合、以下のように展開されてしまう。
pの後に空白文字が入り、WEBブラウザが正しく理解してくれない。
style.css

p :nth-child(1){ color:#f00 }
p :nth-child(2){ color:#0f0 }
p :nth-child(3){ color:#00f }

この場合、以下のように & を付けて書かないといけない。
style.scss

p{
  &:nth-child(1){ color:#f00 }
  &:nth-child(2){ color:#0f0 }
  &:nth-child(3){ color:#00f }
}

すると…
以下のように正しく展開される。
style.css

p:nth-child(1){ color:#f00 }
p:nth-child(2){ color:#0f0 }
p:nth-child(3){ color:#00f }

4. 応用

:nth-child(2n) で 2の倍数番目の要素に対する指定。
:nth-child(3n) で 3の倍数番目の要素に対する指定。
:nth-child(odd) で 奇数番目の要素に対する指定。
:nth-child(even) で 偶数番目の要素に対する指定。
などの使い方もあるそうな。

適材適所で使い分けて行こうと思う。
乱用するとソースコードが見づらくなりそうだから注意しようっと。

参考情報

有益な情報をありがとうございます。 m(_ _)m
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child


コメントを残す

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)