More than 5 years have passed since last update.

:first-child、:last-childが効かない！！問題について

Last updated at 2018-02-16Posted at 2018-02-15

:first-child、:last-childとは

CSSの擬似クラスの一つです。
ある要素内で最初、もしくは最後に現れる子要素を対象にスタイルを適用します。
いくつか同じ要素や同じクラスのがタグが入っていて、何番目のタグだけに他と異なるスタイルを当てたい時に
使います。

ただ時折、なぜかスタイルが当たらない！！という事態に陥ります。

:first-childの定義の勘違いが主な原因です。
最初に現れる子要素、という指定は、指定したプロパティの中で最初に現れるこ要素ということではなく、全てのタグを含めた初めに現れる子要素という意味です。
どうゆうことかというと。

<div>
  <h1>title</h1>
  <p>mozi</p>
  <p>mozi</p>  
  <p>mozi</p>
  <p>mozi</p>
</div>

このコードの一つ目のpタグにスタイルを当てたいと設定します。この場合…

div p:first-child {
  color:red;
}

としても、スタイルが当たりません。
ここでのfirst-childとはh1のことになるので、pのfirst-childなんていないよと見なされてしまうからです。
なので、この場合

div p:first-of-type {
  color:red;
}

とするとお目当てのセレクタにプロパティが当たります。

:first-child、:last-childは全てのタグを含めた初め、終わりに現れる子要素という指定方法。