【完全解説】CSS3 first-of-typeとクラス名の組み合わせで、ワンランク上のスタイリングを！

2024-04-26

CSS3セレクタ :first-of-type とクラス名を使ったスタイリング：詳細ガイド

CSS3 の :first-of-type 疑似クラスは、特定の要素タイプの中で最初に現れる要素のみをスタイリングする強力なツールです。この機能とクラス名を組み合わせることで、柔軟かつ高精度なデザインが可能になります。

本ガイドでは、first-of-type とクラス名の組み合わせ方、具体的な用例、注意点などを詳しく解説していきます。

:first-of-type 疑似クラスとは？

:first-of-type は、親要素内における特定の要素タイプの中で 最初に現れる要素のみ を選択するための疑似クラスです。例えば、p 要素の中で最初に現れる要素のみを赤色にしたい場合は、以下の CSS コードを使用します。

p:first-of-type {
  color: red;
}

クラス名と組み合わせる仕組み

:first-of-type をクラス名と組み合わせることで、特定のクラスを持つ要素の中で最初に現れる要素のみ を選択できます。この機能を活用することで、より精度の高いスタイリングを実現できます。

例：特定のクラスを持つ li 要素のみを強調

以下の HTML コードと CSS コードを見てみましょう。

<ul class="myList">
  <li class="item">アイテム1</li>
  <li>アイテム2</li>
  <li class="item">アイテム3</li>
</ul>

.item:first-of-type {
  font-weight: bold;
}

このコードでは、myList クラスを持つ ul 要素内における .item クラスを持つ要素の中で 最初に現れる要素のみ が太字で表示されます。

擬似クラスと擬似要素の違い

:first-of-type は 疑似クラス であり、疑似要素 とは区別されます。疑似要素は :: で始まる一方、疑似クラスは : で始まります。

利用例

特定のセクションの最初の見出しのみを強調する
最初に表示される画像にのみ影をつける
最初の箇条書きのみを太字にする
最初のテーブル行のみを異なる背景色にする

注意点

:first-of-type は、可視要素のみ に適用されます。非表示要素には影響しません。
他の擬似クラスと同様に、:first-of-type はブラウザによって互換性が異なる場合があります。古いブラウザでは動作しない可能性があることに注意してください。

まとめ

:first-of-type とクラス名を組み合わせることで、Web ページのデザインにおいて柔軟性と精度を高めることができます。このガイドを参考に、ぜひ実践してみてください。

<section class="section">
  <h2>最初の見出し</h2>
  <p>本文</p>
  <h2>次の見出し</h2>
  <p>本文</p>
</section>

.section h2:first-of-type {
  color: red;
}

<div class="image-container">
  <img src="image1.jpg" alt="画像1">
  <img src="image2.jpg" alt="画像2">
</div>

.image-container img:first-of-type {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<ul class="list">
  <li>最初の項目</li>
  <li>次の項目</li>
  <li>最後の項目</li>
</ul>

.list li:first-of-type {
  font-weight: bold;
}

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

table tr:first-of-type {
  background-color: #f0f0f0;
}

これらのサンプルコードはあくまでも一例であり、状況に合わせてさまざまな組み合わせが可能です。

:first-of-type 以外の代替方法

:nth-child() 疑似クラス

:nth-child() 疑似クラスは、要素の インデックス に基づいて選択することができます。例えば、親要素内の 2番目の要素のみ をスタイリングしたい場合は、以下の CSS コードを使用します。

p:nth-child(2) {
  color: blue;
}

JavaScript を使用して、動的にスタイルを適用することもできます。例えば、ページが読み込まれたときに、最初の画像にのみ影をつける場合は、以下のコードを使用できます。

const firstImage = document.querySelector('.image-container img:first-of-type');
firstImage.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';

属性セレクタを使用して、特定の属性を持つ要素をスタイリングすることもできます。例えば、alt 属性が "最初の画像" である最初の画像のみをスタイリングしたい場合は、以下の CSS コードを使用します。

img[alt="最初の画像"]:first-of-type {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

兄弟要素の参照

h2 + p:first-of-type {
  color: green;
}

最適な方法の選び方

使用する方法は、状況によって異なります。以下は、それぞれの方法の利点と欠点です。

方法	利点	欠点
`:first-of-type`	シンプルでわかりやすい	古いブラウザでは対応していない場合がある
`:nth-child()`	柔軟性が高い	インデックス番号を覚える必要がある
JavaScript	動的にスタイルを適用できる	コードが複雑になる
属性セレクタ	特定の属性を持つ要素を簡単に選択できる	属性の値に依存するため、柔軟性に欠ける
兄弟要素の参照	特定の要素の前後の要素を簡単に選択できる	構造を変更すると意図した動作をしなくなる可能性がある