Posted at

first-childセレクタとfirst-of-typeセレクタの違い

More than 3 years have passed since last update.

first-childが何故か効かない、ということがあったので少し調べました。


first-childセレクタ

以下のCSSが適用されるか調べてみる。

.sample p:first-child {

font-weight: bold;
}


CSSが適用される場合


<div class="sample">
<p>how</p>
<h2>are</h2>
<h2>you</h2>
<p>gone?</p>
</div>

この場合は、一番初めのp要素にcssが適用される。


CSSが適用されない場合


<div class="sample">
<h2>are</h2>
<p>how</p>
<h2>you</h2>
<p>gone?</p>
</div>

この場合、pにはCSSが適用されない。

sampleの初めの子要素(first-child)がh2要素だからである。

p:first-childは、あくまでも「最初の子要素がp要素だった場合のみ」装飾が適用される。


first-of-typeセレクタ

p要素だけカウントしてCSSを適用したい場合は、以下のように書く。

.sample p:first-of-type {

font-weight: bold;
}

last-childとlast-of-typeについても、

最後の子要素についてみるという以外は同じ考え方になります。