擬似クラスセレクタについて教えてください。

質問

以下の擬似クラスセレクタですが、本をみてもネットで探しても
いまいちその違いがわかりません。

:first-childと:first-of-typeの違い

お手透きの際にでも、ご説明いただけると幸いです。

回答No.1

ORUKA1951 · ベストアンサー

率直に
first(最初の)child(子供)
first(最初の)of(の)type(タイプ)

<div class="section">
　<p>文章(1)<em>強調(1)</em>です。</p>
　<p>文章(2)<em>強調(2)</em>です。</p>
</div>
<div class="section">
　<h2>見出し(1)</h2>
　<p>文章(3)<em>強調(3)</em>です。</p>
　<div class="aside">
　　<p>文章(4)<em>強調(4)</em>です。</p>
　　<p>文章(5)<em>強調(5)</em>です。</p>
　</div>
　<p>文章(6)<em>強調(6)</em>です。</p>
</div>
div p:first-child em{color:red;}
　これで、赤くなるのは、「強調(1)」と「<em>強調(4)」ですね。それ以外のpは、first-childじゃない。
div p:first-of-type em{color:red;}
　これだと「強調(1)」「<em>強調(3)」「強調(4)」が赤くなります。その差は、最初の子供か、最初の男の子かということ。

お礼

ものすごく丁寧で分かりやすく、すぐ理解できました！
ありがとうございます！