Help us understand the problem. What is going on with this article?

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についても、
最後の子要素についてみるという以外は同じ考え方になります。

carotene4035
ずっとふざけていたい。少年の心を持ったエンジニアです。
http://karoten512.hatenablog.com/
geologic
位置情報広告を運営するスタートアップ
http://www.geologic.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away