CSS :first-of-typeでできること、できないこと。知っておくべきポイントと代替方法

例：

ul li:first-of-type {
  color: red; /* 最初の li 要素のみ赤色に */
}

この CSS コードは、ul 要素 内の li 要素 のうち、最初に現れる要素のみ を赤色に変更します。

":first-of-type" の特徴

親子関係にある要素に対しては適用されません。
継承性はありません。
兄弟要素同士での判定となります。
同じ種類の要素の中で 適用されます。

要素の種類を判断する際には、要素名だけでなく、属性や 疑似クラス も考慮されます。
":first-child" と似ていますが、":first-child" は 親要素 の最初の子要素のみを対象とするのに対し、":first-of-type" は 同じ種類の要素 の中で最初に出現する要素を対象とします。

フォームの最初の入力欄のみ赤い枠線で囲む
表の最初の行のみ太字にする
段落中の最初の見出しのみ強調する

擬似クラスと組み合わせて使用することで、より複雑な条件を設定することも可能です。
":first-of-type" を否定形 (not(:first-of-type)) で使用することで、最初の要素以外にスタイルを適用することもできます。

<article>
  <h2>見出し１</h2>
  <p>本文１</p>

  <h2>見出し２</h2>
  <p>本文２</p>
</article>

article h2:first-of-type {
  color: red; /* 最初の h2 要素のみ赤色に */
}

結果

見出し１のみ赤色で表示されます。

例 2：表の最初の行のみ太字にする

<table>
  <tr>
    <th>項目１</th>
    <th>項目２</th>
    <th>項目３</th>
  </tr>
  <tr>
    <td>データ１</td>
    <td>データ２</td>
    <td>データ３</td>
  </tr>
  <tr>
    <td>データ４</td>
    <td>データ５</td>
    <td>データ６</td>
  </tr>
</table>

table tr:first-of-type th {
  font-weight: bold; /* 最初の tr 要素の th 要素のみ太字に */
}

結果

表の最初の行の<th>要素のみ太字で表示されます。

例 3：フォームの最初の入力欄のみ赤い枠線で囲む

<form>
  <label for="name">名前：</label>
  <input type="text" id="name">

  <label for="email">メールアドレス：</label>
  <input type="email" id="email">

  <button type="submit">送信</button>
</form>

form input:first-of-type {
  border: 1px solid red; /* 最初の input 要素のみ赤い枠線で囲む */
}

結果

フォームの最初の入力欄のみ赤い枠線で囲まれます。

これらの例はほんの一例です。":first-of-type" を活用することで、様々なレイアウトやデザインを実現することができます。

複雑な条件を設定したい場合は、":nth-of-type()" などの擬似クラスと組み合わせて使用すると良いでしょう。
否定形 (not(:first-of-type)) を使用することで、最初の要素以外にスタイルを適用することもできます。
上記の例では、擬似クラスと組み合わせて使用していますが、要素名のみを指定することも可能です。

":nth-of-type(1)"

":nth-of-type(1)" は、":first-of-type" とほぼ同じ動作をするセレクタですが、":first-of-type" よりも汎用性が高く、要素の種類に関係なく 最初の子要素を選択することができます。

利点

要素の種類に関係なく使用できる
":first-of-type" よりも汎用性が高い

欠点

":first-of-type" よりも冗長な記述になる

例

ul li:nth-of-type(1) {
  color: red; /* 最初の li 要素のみ赤色に */
}

要素の子要素を直接指定する

":first-of-type" の代わりに、要素の子要素を直接指定する方法もあります。ただし、この方法は、要素の種類 や構造に依存するため、汎用性が低くなります。

利点

記述が簡潔になる場合がある

欠点

変更が発生した場合、セレクタの修正が必要になる可能性がある
要素の種類や構造に依存するため、汎用性が低い

例

ul > li:first-child {
  color: red; /* 最初の li 要素のみ赤色に */
}

JavaScript を使用する

":first-of-type" の動作を完全に再現したい場合は、JavaScript を使用する方法もあります。ただし、この方法は、難易度が高く、メンテナンス性も低くなります。

利点

":first-of-type" の動作を完全に再現できる

欠点

メンテナンス性が低い
難易度が高い

例

const elements = document.querySelectorAll('ul li');
elements[0].style.color = 'red';

Shadow DOM を使用する

Shadow DOM を使用すると、":first-of-type" のような疑似クラスをカプセル化することができます。ただし、Shadow DOM は比較的新しい技術であり、すべてのブラウザでサポートされているわけではありません。

利点

":first-of-type" のような疑似クラスをカプセル化できる

欠点

複雑なコードになる可能性がある
新しい技術であり、すべてのブラウザでサポートされているわけではない

<ul>
  <shadowroot>
    <li>要素１</li>
    <li>要素２</li>
    <li>要素３</li>
  </shadowroot>
</ul>

ul li:first-of-type {
  color: red; /* 最初の li 要素のみ赤色に (Shadow DOM 内のみ適用) */
}

CSS :first-of-typeでできること、できないこと。 知っておくべきポイントと代替方法

例：

":nth-of-type(1)"

CSS :first-of-typeでできること、できないこと。知っておくべきポイントと代替方法