:first-child／:first-of-typeと反対に「擬似要素（ 擬似クラス ）」 :last-child／:last-of-type という方法を使うとリストやボックスが並んでいる最後の部分だけ、何か（例えば色を変えたり）などが可能です。:last-childや:last-of-typeといった記述をセレクタの末尾に追記します。
擬似クラス基本（:last-child）
:last-child擬似クラスは「要素内で最後に現れる子要素を対象」にスタイルを適用する方法です。
例えば、下記のようなリストがあったとします。
- リンゴ
- ミカン
- バナナ
- レモン
- スイカ
<ul>
<li>リンゴ</li>
<li>ミカン</li>
<li>バナナ</li>
<li>レモン</li>
<li>スイカ</li>
</ul>この時、最後の「スイカ」だけ「文字カラーを赤色にしたい」と思った時に、クラス名も何も指定されていないので、インラインで直接色を指定する…という方法になってしまいます。
このような時に使えるのが:last-childです。
<style>
.test1 last-child{
color:red;
}
</style>
<ul class="test1">
<li>リンゴ</li>
<li>ミカン</li>
<li>バナナ</li>
<li>レモン</li>
<li>スイカ</li>
</ul>上記のようにすると、liの中で最後の要素「スイカ」のみが文字が赤色になります。
- リンゴ
- ミカン
- バナナ
- レモン
- スイカ
指定した子要素をカウント（:last-of-type）
先程の例はシンプルな方法でしたが、例えば「divの子要素になっているp要素の最後の色を変えたい」といった少し複雑な指定の場合は、先程の:last-childだけでは上手くいかない場合があります。
<style>
div.test2 p:last-child{
color:red;
}
</style>
<div class="test2">
<p>リンゴ</p>
<div>
<p>ミカン</p>
<p>バナナ</p>
<p>レモン</p>
<p>スイカ</p>
</div>
</div>上記のような指定をした場合、「スイカ」が赤色になります。
リンゴ
ミカン
バナナ
レモン
スイカ
divが親要素である子要素の最後のpを取得するので「スイカ」が条件に当てはまります。ただ、この場合だと「リンゴ」もdiv親要素内の最後の要素なので赤色になって欲しいところですが、なりません。
もしリンゴ（divが親要素の中の子要素で最初に出現するp要素）を赤文字にしたい場合には:first-of-typeが使えます。
<style>
div.test4 p:last-of-type{
color:red;
}
</style>
<div class="test4">
<p>リンゴ</p>
<div>
<ｐ>ミカン</p>
<p>バナナ</p>
<p>レモン</p>
<p>スイカ</p>
</div>
</div>この時には「リンゴ」と「スイカ」の文字が赤色になります。:last-of-typeを使うことで「divが親要素の中の子要素で最後に出現するp要素」という指定に変わります。
リンゴ
ミカン
バナナ
レモン
スイカ
まとめ
疑似要素の基本である「:last-child」「:last-of-type」の使い方でした。ここまで「:first-child」「:first-of-type」「:last-child」「:last-of-type」と出てきましたが、それぞれ似ているようで違いますので上手く使い分けてみましょう。※私も混乱していました。
こちらをベースに応用をしていくことで他にも様々な指定をすることが可能になります。他のパターンについては、また追ってご紹介していきたいと思います。
ご参考ください😃
