コーディング

【CSS】first-childとfirst-of-typeの違いは?lastもnthも同じ考え方

投稿日:2020年9月6日 更新日:

こんにちは。

今回は、セレクタ解説の番外編となります。
first-childとfirst-of-typeの違いです。
この二つは似ているのでときどき混乱します。

似たようなセレクタでlast-child、last-of-type、nth-child、nth-of-typeがありますが、これらの違いはfirst-childとfirts-of-typeの違いと同じですので、この記事で全てカバーできるようになっています。

<前編>複数、子孫、子、隣接…覚えておきたいセレクタをまとめました。6コだけ
<後編>first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。6コだけ


:first-child

まずは下記の例を見てください。

<style>
 .container p:first-child{
  color: red;
 }
</style>
<body>
 <div class="container">
    <p>1.このpは指定されてません</p>
    <p>2.このpは指定されてません</p>
    <p>3.このpは指定されてません</p>
  </div>
</body>

兄弟グループの<p>達の中で最初の<p>だけを指定します。

では、次の例はいかがでしょう?

<style>
 .container p:first-child{
  color: red;
 }
</style>
<body>
 <div class="container">
  <h1>H1です。</h1>
  <p>1.このpは指定されてません</p>
  <p>2.このpは指定されてません</p>
  <p>3.このpは指定されてません</p>
  </div>
</body>

んんん!? CSSが適用されなくなってしまいました。

さて、上記2例のHTMLで違いは<h1>があるかどうかです。
一文ですが、ここが大きなポイントとなります。

CSSが適用されなくなった理由は「.container」内の最初の子要素が<p>ではなく、<h1>だからです。
言わば<p>はfirst-childではなく、nth-child(2)になったと考えればいいでしょう。

この問題を解決してくれるのが「:first-of-type」です。

「:first-of-type」は兄弟要素の中でも直前に指定したタグ以外は無視して(今回では<h1>)、指定されたタグの一番目を指定してくれます。
説明を理解しようとするより次の例を見た方がわかりやすいと思います。w

:first-of-type

<style>
 .container p:first-of-type{
  color: red;
 }
</style>
<body>
 <div class="container">
  <h1>H1です。</h1>
  <p>1.このpは指定されてません</p>
  <p>2.このpは指定されてません</p>
  <p>3.このpは指定されてません</p>
  </div>
</body>

狙い通りに最初の<p>にCSSが適応されました。
:first-of-typeは同階層の一番最初のタグが直前指定タグ(今回はp:first-of-typeだからp)とは違う場合そのタグを無視して、pタグの中で一番最初のpタグを見つけてCSSを適応してくれます。

「:first-of-type」を使っていれば、上記の例の<div>内に<h2>,<h3>が公開後に追加されたとしても最初の<p>へのCSSは変更されません。
こう言った変更は実装途中でも起きたりしますので、ぜひ理解しましょう!

「:last-child」と「:last-of-type」、「:nth-child」と「:nth-of-type」の違いもこの考え方と同じです。
childとof-typeの違いはしっかり理解しておきましょう!

では!

<前編>複数、子孫、子、隣接…覚えておきたいセレクタをまとめました。6コだけ
<後編>first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。6コだけ

-コーディング
-, , , , , , , ,

執筆者:

関連記事

CSS

【CSS】hoverした時に別要素にアクションをさせる方法

今回はhoverした時に別の要素にアクションをつける方法を書きました。意外に躓くところなので、一読していただければと思います。脱初心者の為の内容となっています。

CSS

【CSS】 first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。<後編>

今回はセレクタ解説の後編です。first-child,last-child,nth-of-type,,,などなど

sass

SCSSの基礎

SCSSの基本をまとめてみました。CSSで書くよりかなりスピードアップしますし、記述場所も明確でわかりやすくなります。

CSS

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

CSS小技集。勉強しててイイなと思ったテクを共有します。

CSS

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

CSSでテキストにアンダーラインを引く方法をいくつか紹介します。普通の下線、太線、マーカー風の下線まで表現できる実装をまとめました。ブログやLP制作で、ユーザーの目線を奪うことは重要です。それにはテキストを際立たせる必要になる時があります。そんな時の為にアンダーラインの理解を深めましょう。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。