CSSの:first-of-type擬似クラスとは？初心者向けにわかりやすく解説

CSSでスタイルを指定していると、「特定の要素だけ」を選びたい場面によく出会います。例えば、<div>タグと<span>タグがたくさん並ぶHTMLドキュメントの中で、それぞれの「最初の要素」にだけ特別なスタイルを適用したいとしましょう。そんなときに活躍するのが、:first-of-type（ファースト・オブ・タイプ）擬似クラスです。

擬似クラスとは何か

擬似クラス（pseudo-class）とは、CSSセレクターに対して、元のスタイルとは異なる特定のスタイルを適用するための仕組みです。要素の「状態」に応じてスタイルを切り替えられるのが大きな特徴です。今回のケースでは、最初の<div>と最初の<span>だけを選択してスタイリングを行います。それ以外のspanやdivには一切影響しません。

:first-of-typeのサンプルコード

まずは実際のコードを見てみましょう。

<html>
 
 <head>
   <style>
     body {
       display: flex;
       flex-flow: row wrap;
     }
     div {
       height: 100px;
       width: 200px;
       border: 1px solid black;
       margin: 20px;
       padding: 20px;
     }
 
     /* First of type */
     div:first-of-type {
       background: purple;
       color: white;
     }
     div span:first-of-type {
       color: red;
       text-decoration: underline;
       background: lightblue;
     }
 
   </style>
 </head>
 <body>
 
   <div>I am the first div<span> I am inside the div and the first span</span><span> I am the second span</span></div>
   <div>I am the second the div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the third div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the fourth div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the fifth div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the sixth div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the seventh div<span> I am inside the div</span><span> I am the second span</span></div>
 </body>
</html>

コードの解説

この例では、複数の<div>と、その中に含まれる<span>が配置されています。ここで重要なポイントは次の2つです。

div:first-of-type … 兄弟要素の中で「同じ種類として最初に現れる」divだけを選択し、紫色の背景と白い文字を適用します。
div span:first-of-type … 親要素である各divの中で最初のspanを選択します。そのため、7つのdivすべての最初のspanに赤字・下線・水色背景が適用されます。

:nth-child(1)との関係

div:first-of-typeは、div:nth-child(1)と書いた場合と同じ結果になります。ただし注意が必要なのは、これが成り立つのは子要素がすべてdivで構成されている場合だけという点です。:first-of-typeは「同じ種類（タグ名）の中で最初」という意味なので、兄弟要素に<p>や<h2>など別のタグが混ざっている場合、:nth-child(1)とは異なる要素を指すことになります。用途に応じて使い分けましょう。

まとめ

この記事では、:first-of-type擬似クラスについて解説しました。擬似クラスとは、CSSセレクターがどのような状態にあるときにスタイルを適用するかを記述するためのものであり、:first-of-typeはその中でも「同種の要素のうち最初の1つ」を対象にできる便利なセレクターです。基本的な構文と挙動を理解したら、:last-of-typeや:nth-of-type()など、他の擬似クラスにもぜひ触れてみてください。セレクターの引き出しが増えるほど、CSS設計の自由度は大きく広がります。

純粋なCSSだけでチェックボックスとラジオボタンをカスタマイズする方法を解説

CSS FlexboxとCSS Gridの違いとは?特徴と使い分けのポイントを解説

CSSの:nth-child()疑似クラスの使い方と実例まとめ
CSSの:nth-child()疑似クラスは、親要素の中でn番目に位置する子要素を選択するためのセレクタです。リストやカード型レイアウトなど、繰り返し表示される要素のうち特定の位置だけにスタイルを適用したい場合に非常に便利です。構文 :nth-child()疑似クラスの基本構文は以下のとおりです。 :nth-child(n){ /*スタイル宣言*/ } 引数には単純な数値のほか、「odd（奇数番目）」「even（偶数番目）」といったキーワードや、「2n+1」のような数式も指定できるため、柔軟なスタイリングが可能です。例1：複数のボックスに個別の背景色を適用する
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da