570 views
この記事は最終更新から 885日 が経過しています。
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