CSS セレクターマスターへの道 :first-of-type と first-child の違い

CSSセレクター ":first-of-type" の詳細解説

":first-of-type" とは？

例:

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

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

この例では、container 要素内の最初の p 要素のみが赤色で表示されます。

":first-of-type" の使い方

:first-of-type は、以下の要素に適用できます。

• HTML要素
• 擬似要素
• コンテンツ要素

例:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

この例では、ul 要素内の最初の li 要素のみが太字で表示されます。

":first-of-type" の注意点

:first-of-type は、以下の点に注意する必要があります。

• 空白文字は無視されます
• 兄弟要素は、同じ親要素内にある必要があります
• :first-child とは異なります

:first-child は、親要素内の最初の子要素のみを選択する セレクターです。:first-of-type は、同じ親要素内にある兄弟要素の中で最初に出現する要素 を選択します。

例:

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

.container p:first-child {
  color: red;
}

この例では、container 要素内の最初の p 要素のみが赤色で表示されます。

一方、以下のコードでは、p 要素は div 要素内の最初の子要素ではないため、赤色で表示されません。

<div class="container">
  <h1>Heading</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

.container p:first-child {
  color: red;
}

":first-of-type" の応用例

:first-of-type は、以下の様な場面で役立ちます。

• ナビゲーションバーの最初の項目にスタイルを適用する
• リストの最初の項目にスタイルを適用する
• 記事の最初の段落にスタイルを適用する

例:

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

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

この例では、navigation 要素内の最初の li 要素のみが太字で表示されます。

まとめ

:first-of-type は、同じ親要素内にある兄弟要素の中で最初に出現する要素のみを選択する CSS セレクターです。

以下の点に注意して、様々な場面で活用しましょう。

":first-of-type" セレクターのサンプルコード

ナビゲーションバーの最初の項目にスタイルを適用する

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.navigation li:first-of-type {
  /* スタイル */
}

例：

• 最初の項目に太字を適用する
• 最初の項目に背景色を適用する
• 最初の項目にマージンを設定する

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

.navigation li:first-of-type {
  background-color: #ccc;
}

.navigation li:first-of-type {
  margin-left: 10px;
}

リストの最初の項目にスタイルを適用する

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.list li:first-of-type {
  /* スタイル */
}

この例では、list 要素内の最初の li 要素にのみスタイルが適用されます。

例：

• 最初の項目に異なるフォントを適用する
• 最初の項目にパディングを設定する

.list li:first-of-type {
  list-style-type: circle;
}

.list li:first-of-type {
  font-family: Arial, sans-serif;
}

.list li:first-of-type {
  padding: 10px;
}

記事の最初の段落にスタイルを適用する

<article>
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</article>

article p:first-of-type {
  /* スタイル */
}

この例では、article 要素内の最初の p 要素にのみスタイルが適用されます。

例：

• 最初の段落に異なるフォントサイズを設定する

article p:first-of-type {
  font-weight: bold;
}

article p:first-of-type {
  font-size: 18px;
}

article p:first-of-type {
  margin-top: 10px;
}

その他のサンプル

• テーブルの最初の行にスタイルを適用する
• フォームの最初の入力欄にスタイルを適用する
• 画像ギャラリーの最初の画像にスタイルを適用する

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<form>
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="submit" value="Submit">
</form>

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

table tr:first-of-type {
  /* スタイル */
}

form input:first-of-type {
  /* スタイル */
}

.gallery img:first-of-type {
  /* スタイル */
}

例：

• 最初の入力欄に

":first-of-type" 以外の方法

:first-child

:first-child は、親要素内の最初の子要素を選択する セレクターです。:first-of-type と似ていますが、兄弟要素の種類に関わらず 最初の要素を選択します。

例:

<div class="container">
  <h1>Heading</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

.container :first-child {
  /* スタイル */
}

この例では、container 要素内の最初の 子要素 である h1 要素にのみスタイルが適用されます。

nth-child()

nth-child() は、親要素内のn番目の要素を選択する セレクターです。n には数値を指定できます。

例:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.list li:nth-child(1) {
  /* スタイル */
}

この例では、list 要素内の 1番目の li 要素にのみスタイルが適用されます。

直接要素を指定する

要素数が少ない場合は、直接要素を指定することもできます。

例:

<p id="first-paragraph">Paragraph 1</p>

#first-paragraph {
  /* スタイル */
}

この例では、id 属性が first-paragraph である p 要素にのみスタイルが適用されます。

• 兄弟要素の種類に関わらず最初の要素を選択したい場合は、:first-child を使用します。
• 特定の順番の要素を選択したい場合は、nth-child() を使用します。
• 要素数が少ない場合は、直接要素を指定します。

:first-of-type は、同じ親要素内にある兄弟要素の中で最初に出現する要素 を選択する便利なセレクターです。

状況に合わせて、他の方法も活用しましょう。