こんにちは、いとです。
今週……としたかったのですが、先週コーディングの学習を通して分からず調べる中で、残しておきたいと思った記述についてまとめておきます。
nth-childとnth-of-typeの違い
コーディングをする中で、何番目の子要素をあれこれしたい、みたいな時に使用する疑似要素「nth-child」と「nth-of-type」。
この二つの違いがいまいちよく分からなかったので、調べてみました。
nth-child → 要素に関わらず何番目と数える
nth-of-type → 特定の要素に対して何番目と数える
答えは上記ですが、これだけでは分かりづらいので。
下記のようなコードがあったと仮定します。
<h1>test_title1</h1>
<p>testtext1</p>
<p>testtext2</p>
<p>testtext3</p>
<h1>test_title2</h1>
<p>testtext4</p>
<p>testtext5</p>
<p>testtext6</p>
この時、nth-childで
p:nth-child(2n) {
color: red;
}と記述すると、要素名に関わらず2の倍数に該当する要素が赤くなります。
つまり、testtextの1、3、4、6の4ヶ所ですね。
それに対してnth-of-typeの場合は、
p:nth-of-type(2n) {
color: red;
}nth-childと同じように記述しても、あくまでp要素の中の2の倍数に該当する要素が赤くなるので、testtextの2、4、6の三ケ所となります。
小さな違いですが、表示される内容を考えると大きな違いとなりますね。
その上で応用？はこちらが分かりやすかったので。
CSSのnth-childとnth-of-typeについて基本から学ぼう
最後に
自分なりにアウトプットしてみると、思考が整理されていいですね。ただ文面を読むだけよりもずっと理解ができるような気がします。
今後はこういうアウトプットも行っていきたいです。
もちろんまだまだ学習中の身ですので、誤り等ありましたら教えていただけると嬉しいです。よろしくお願いします。