CSSのfirst-childやlast-childが効かない原因と解決方法

こんにちは。テイクです。ホームページを作り続けて9年になります。

要素の最初と最後の要素に対する指定といえば疑似クラス:first-child :last-childです。

しかしある条件により効かないことがあります。

CSSのfirst-childやlast-childが効かない原因と解決方法を説明します。

結論

以下で詳しく説明します。

成功例

:first-of-typeや:last-of-typeを使った場合

html

<h2 style="font-size: 100%;">タイトル</h2>
<p>本文1</p>
<p>本文2</p>
<p>本文3</p>
<p>本文4</p>
<div>フッター</div>

CSS

<style>
p:first-of-type{
    color: red;
}
p:last-of-type{
    color: blue;
}
</style>

first-of-typeやlast-of-typeを使うと「要素の一番目のp」 「要素の最後のp」に対する指定ができます。

では、first-childやlast-childとどう違うのでしょうか。

失敗例と合わせて説明します。

失敗例

:first-childや:last-childを使った場合

html

<h2 style="font-size: 100%;">タイトル</h2>
<p>本文1</p>
<p>本文2</p>
<p>本文3</p>
<p>本文4</p>
<div>フッター</div>

CSS

p:first-child{
    color: red;
}
p:last-child{
    color: blue;
}

上記の「p:first-child」は「要素の一番目のp」ではなく、「要素の一番目がpなら」という指定です。

「p:last-child」も同様に「要素の最後のp」ではなく、「要素の最後がpなら」という指定です。

first-of-typeとfirst-childは微妙に仕様が異なるので使い分けが肝心です。

子要素の一番目がなんであれ指定したいとき

html

<div class="example">
    <h2 style="font-size: 100%;">タイトル</h2>
    <p>本文1</p>
    <p>本文2</p>
    <p>本文3</p>
    <p>本文4</p>
    <div>フッター</div>
</div>

CSS

.example :first-child{
    color: red;
}
.example :last-child{
    color: blue;
}

「親要素+半角スペース+疑似クラス」のように指定するとタグに関わらず、○番目の要素に対する指定ができます。

その他

上記にも当てはまらない場合、他が原因かもしれません。
↓こちらの記事を参考にしてみてください。

ほかにも疑似要素などまとめています。

まとめ

必ず指定したいとき

first-of-typeやlast-of-typeを使う

条件として指定したいとき

first-childやlast-childを使う

子要素の一番目がなんであれ指定したいとき

(空白スペース) :first-childや :last-childを使う

以上、CSSのfirst-childやlast-childが効かない原因と解決方法でした。