SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.16
  • CATEGORY
TITLE

【CSS】構造擬似クラス:first-of-type、:last-of-typeの使い方

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】構造擬似クラス:first-of-type、:last-of-typeの使い方
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • :first-of-type、:last-of-typeの使い方について学びたい方へ
  • 今回は構造擬似クラスを学習しよう
:first-childとfirst-of-typeの違い

上の図のように、pタグに対してCSSを指定した場合
:first-childは、最初の子要素に対してですが、このように見出し(h1,h2,h3)など、含む場合は見出し
を優先してしまうため、適用されません。
:first-of-typeは、同じ要素のみをカウントして、最初の子要素(pタグ)のみにCSSが適用されます。

first-child、last-childについては前回の記事で詳しく解説しております。

first-child、last-childについて

first-child、last-childの使い方を解説しております。

構造擬似クラス

構造擬似クラス

今回は構造擬似クラスの:first-of-type、:last-of-typeについての解説記事なります。
書き方は以下のようになります。

/*--first-of-type--*/
要素:first-of-type {プロパティ: 値;}

/*--last-of-type--*/
要素:last-of-type {プロパティ: 値;}
指定できる値
  • first-of-type
    同じ要素のみをカウントして、最初の子要素を指定します
  • last-of-type
    同じ要素のみをカウントして、最後の子要素を指定します
  • first-child 
    解説の記事ありますよ
    最初の子要素を指定する
  • last-child 
    解説の記事ありますよ
    最後の子要素を指定する

構造擬似クラス:first-of-typeについて

構造擬似クラス:first-of-typeについて

:first-of-typとは、同じ要素のみをカウントして、最初の子要素を指定します。
first-childは、
見出し(h1,h2,h3)も含む、全部のセレクタをカウントします。
first-of-typeは、
同じ子要素(pタグ)のみ、カウントします。

下記のように、見出しなどを含む場合に、first-childで指定した場合は、見出しを優先してしまうため、
CSSが適用されません。

first-childの場合

first-childの場合

1番目の要素

2番目の要素

3番目の要素

4番目の要素

<div>
 <h3>first-childの場合</h3>
 <p>1番目の要素</p>
 以下省略
</div>
/*--装飾は省略--*/

/*--先頭から3番目を指定--*/
div p:first-child {
	background-color: #fd6158;
	color: #fff;
}

下記のように、pタグにfirst-of-typeを指定した場合は、子要素(pタグ)をしっかり認識し
CSSが適用されます。

first-of-typeの場合

first-of-typeの場合

1番目の要素

2番目の要素

3番目の要素

4番目の要素

<div>
 <h3>first-of-typeの場合</h3>
 <p>1番目の要素</p>
 以下省略
</div>
/*--装飾は省略--*/

/*--先頭から3番目を指定--*/
div p:first-of-type {
	background-color: #fd6158;
	color: #fff;
}

POINT!
このように、指定した子要素以外に見出しなどがある場合は、first-childでは指定せず、
first-of-typeを使うようにしましょう。

構造擬似クラス:last-of-typeについて

構造擬似クラス:last-of-typeについて

:last-of-typeとは、同じ要素のみをカウントして、最後の子要素を指定します。
last-childは、
見出し(h1,h2,h3)も含む、全部のセレクタをカウントします。
last-of-typeは、
同じ子要素(pタグ)のみ、カウントします。

下記のように、見出し、文章、見出しと続く際に、pタグにlast-childを指定した場合は、
最後の見出し(h3)を認識してしまうため、CSSが適用されません。

last-childの場合

1番目の要素

2番目の要素

3番目の要素

last-childの場合

<div>
 以下省略
 <p>3番目の要素</p>
 <h3>last-childの場合</h3>
</div>
/*--装飾は省略--*/

/*--最後から3番目を指定--*/
div p:last-child {
	background-color: #1ece50;
	color: #ffffff;
}

下記のように、pタグにlast-of-typeを指定した場合は、子要素(pタグ)をしっかり認識し
CSSが適用されます。

last-of-typeの場合

1番目の要素

2番目の要素

3番目の要素

last-of-typeの場合

<div>
 以下省略
 <p>3番目の要素</p>
 <h3>last-of-typeの場合</h3>
</div>
/*--装飾は省略--*/

/*--最後から3番目を指定--*/
div p:last-of-type {
	background-color: #1ece50;
	color: #ffffff;
}

POINT!
このように、指定した子要素以外に見出しなどがある場合は、last-childでは指定せず、
last-of-typeを使うようにしましょう。

まとめ

今回はこれで以上です。

POINT
  • first-of-typeは、同じ要素のみをカウントして、最初の子要素を指定します。
  • last-of-typeは、同じ要素のみをカウントして、最後の子要素を指定します。
  • 指定した子要素以外に見出しなどがある場合は、first-of-typeやlast-of-typeで指定しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top