CSSの:first-childと:first-of-typeの違い
Webページのスタイリングにおいて、特定の要素を選択し、装飾を適用することはよくある作業です。CSSには、要素を選択するための様々な擬似クラスが用意されており、その中でも「:first-child」と「:first-of-type」は、要素の順番に基づいて選択を行う際に便利な擬似クラスです。しかし、この2つの擬似クラスには、明確な違いが存在します。
:first-childとは
「:first-child」は、親要素の最初の子要素にのみ適用される擬似クラスです。要素の種類は問わず、親要素の直下にある最初の要素であれば、どんな要素にも適用されます。
<div class="parent">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
.parent :first-child {
color: red;
}
上記の例では、「.parent」クラスを持つdiv要素内の最初の子要素である段落1にのみ、赤い文字色が適用されます。
:first-of-typeとは
一方、「:first-of-type」は、特定の種類の要素の中で、最初に現れる要素にのみ適用される擬似クラスです。親要素内で、同じ種類の要素が複数存在する場合でも、その中で最初の要素にのみ適用されます。
<div class="parent">
<span>span要素</span>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
.parent p:first-of-type {
color: blue;
}
上記の例では、「.parent」クラスを持つdiv要素内のp要素の中で、最初に現れる「段落1」にのみ、青い文字色が適用されます。span要素はp要素ではないため、:first-of-typeは適用されません。
:first-childと:first-of-typeの違い
「:first-child」と「:first-of-type」の最大の違いは、要素の種類を考慮するかどうかにあります。「:first-child」は要素の種類を考慮せず、親要素の最初の子要素に無条件で適用されます。一方、「:first-of-type」は要素の種類を考慮し、特定の種類の要素の中で最初の要素にのみ適用されます。
| 擬似クラス | 説明 |
|---|---|
| :first-child | 親要素の最初の子要素に適用 |
| :first-of-type | 特定の種類の要素の中で、最初に現れる要素に適用 |
:first-childと:first-of-typeの使い分け
「:first-child」と「:first-of-type」は、それぞれ以下のような場合に使い分けると便利です。
:first-childを使う場合
- 親要素の最初の子要素にのみ装飾を適用したい場合
- 要素の種類は問わず、順番のみに基づいて装飾を適用したい場合
:first-of-typeを使う場合
- 特定の種類の要素の中で、最初の要素にのみ装飾を適用したい場合
- 要素の種類と順番の両方を考慮して装飾を適用したい場合
参考文献
よくある質問
Q1. :first-childと:first-of-typeを組み合わせることはできますか？
A1. はい、組み合わせることは可能です。例えば、「.parent p:first-child:first-of-type」と記述することで、「.parent」クラスを持つ要素内のp要素の中で、最初の子要素かつ最初に現れるp要素を選択することができます。
Q2. :first-childと:first-of-typeは、Internet Explorerでサポートされていますか？
A2. :first-of-typeは、Internet Explorer 9以降でサポートされています。:first-childは、Internet Explorer 7以降でサポートされています。
Q3. :first-childと:first-of-type以外の、要素の順番に基づいて選択する擬似クラスはありますか？
A3. はい、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)など、要素の順番に基づいて選択する擬似クラスは他にもあります。これらの擬似クラスを利用することで、より柔軟な要素の選択が可能になります。
その他の参考記事:jquery nth child