HTML/CSS

こんにちは、いとです。 今週……としたかったのですが、先週コーディングの学習を通して分からず調べる中で、残しておきたいと思った記述についてまとめておきます。 nth-childとnth-of-typeの違い コーディングをする中で、何番目の子要素をあれこれしたい、みたいな時に使用する疑似要素「nth-child」と「nth-of-type」。この二つの違いがいまいちよく分からなかったので、調べてみました。 nth-child → 要素に関わらず何番目と数える nth-of-type → 特定の要素に対して何番目と数える 答えは上記ですが、これだけでは分かりづらいので。下記のようなコードがあったと仮定します。 &lt;h1&gt;test_title1&lt;/h1&gt; &lt;p&gt;testtext1&lt;/p&gt; &lt;p&gt;testtext2&lt;/p&gt; &lt;p&gt;testtext3&lt;/p&gt; &lt;h1&gt;test_title2&lt;/h1&gt; &lt;p&gt;testtext4&lt;/p&gt; &lt;p&gt;testtext5&lt;/p&gt; &lt;p&gt;testtext6&lt;/p&gt; この時、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について基本から学ぼう 最後に 自分なりにアウトプットしてみると、思考が整理されていいですね。ただ文面を読むだけよりもずっと理解ができるような気がします。今後はこういうアウトプットも行っていきたいです。 もちろんまだまだ学習中の身ですので、誤り等ありましたら教えていただけると嬉しいです。よろしくお願いします。

HTML/CSS

nth-childとnth-of-typeの違いについて

新着記事一覧

アーカイブ一覧