【CSS】擬似要素／リストや要素の最初だけを色を変えたりする時に使える便利な方法「:first-child」「:first-of-type」

「擬似要素（ 擬似クラス ）」 :first-child／:first-of-type という方法を使うとリストやボックスが並んでいる最初の部分だけ、何か（例えば色を変えたり）などが可能です。:first-childや:first-of-typeといった記述をセレクタの末尾に追記します。

擬似クラス基本（:first-child）

:first-child擬似クラスは「要素内で最初に現れる子要素を対象」にスタイルを適用する方法です。

例えば、下記のようなリストがあったとします。

• リンゴ
• ミカン
• バナナ
• レモン
• スイカ

<ul>
<li>リンゴ</li>
<li>ミカン</li>
<li>バナナ</li>
<li>レモン</li>
<li>スイカ</li>
</ul>

この時、最初の「リンゴ」だけ「文字カラーを赤色にしたい」と思った時に、クラス名も何も指定されていないので、インラインで直接色を指定する…という方法になってしまいます。

このような時に使えるのが:first-childです。

<style>
.test1 li:first-child{
color:red;
}
</style>
<ul class="test1">
<li>リンゴ</li>
<li>ミカン</li>
<li>バナナ</li>
<li>レモン</li>
<li>スイカ</li>
</ul>

そうすると、liの中で最初の要素「リンゴ」のみが文字が赤色になります。

• リンゴ
• ミカン
• バナナ
• レモン
• スイカ

指定した子要素をカウント（:first-of-type）

先程の例はシンプルな方法でしたが、例えば「divの子要素になっているp要素の最初の色を変えたい」といった少し複雑な指定の場合は、先程の:first-childだけでは上手くいかない場合があります。

<style>
div.test2 p:first-child{
color:red;
}
</style>
<div class="test2">
<p>リンゴ</p>
<div>
<p>ミカン</p>
<p>バナナ</p>
<p>レモン</p>
<p>スイカ</p>
</div>
</div>

上記のような指定をした場合、「リンゴ」と「ミカン」が赤色になります。

divが親要素である子要素の1つ目のpを取得するので「リンゴ」も「ミカン」も条件に当てはまります。ただ、次のような場合には上手くいかない場合になります。

<style>
div.test3 p:first-child{
color:red;
}
</style>
<div class="test3">
<p>リンゴ</p>
<div>
<span>ミカン</span>
<p>バナナ</p>
<p>レモン</p>
<p>スイカ</p>
</div>
</div>

この時「バナナ」が赤文字になってもよさそうですが、:first-childの場合「1番目の要素」になっていないといけないので「ミカンがどうか？」という判定のみになります。

もしバナナ（divが親要素の中の子要素で最初に出現するp要素）を赤文字にしたい場合には:first-of-typeが使えます。

<style>
div.test4 p:first-of-type{
color:red;
}
</style>
<div class="test4">
<p>リンゴ</p>
<div>
<span>ミカン</span>
<p>バナナ</p>
<p>レモン</p>
<p>スイカ</p>
</div>
</div>

この時にはバナナの文字が赤色になります。:first-of-typeを使うことで「divが親要素の中の子要素で最初に出現するp要素」という指定に変わります。

まとめ

まずは、疑似要素の基本である「:first-child」「:first-of-type」の使い方でした。似ているようで違いますのでご注意ください。※私も混乱していました。

こちらをベースに応用をしていくことで他にも様々な指定をすることが可能になります。他のパターンについては、また追ってご紹介していきたいと思います。

ご参考ください😃