【CSS】最初の要素、最後の要素だけにスタイルを適用したい！

CSSには「擬似クラス」というセレクタがあり、これを使うことで
特定の条件の要素だけを指定してスタイルを適用させることができます。
この擬似クラスは、.class_name や #class_id や p のように
普段使うセレクタの後ろにくっつける形で使います。

:first-child　最初の要素にスタイルを適用する

<ul>
	<li>ココ！</li>
	<li>リスト２</li>
	<li>リスト３</li>
	<li>リスト４</li>
</ul>

<p class="text">ココ！</p>
<p class="text">段落２</p>
<p class="text">段落３</p>

li:first-child {
	color: #ff0000;
	font-weight: bold;
}
.text:first-child {
	color: #ff0000;
	font-weight: bold;
}

:last-child　最後の要素が指定セレクタならスタイルを適用する

<ul>
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
	<li>ココ！</li>
</ul>

<p class="text">段落１</p>
<p class="text">段落２</p>
<p class="text">ココ！</p>

li:last-child {
	color: #ff0000;
	font-weight: bold;
}
.text:last-child {
	color: #ff0000;
	font-weight: bold;
}

:first-of-type　指定セレクタの最初の要素にスタイルを適用する

first-child と似ていますが、
こちらは指定セレクタの中で最初の要素にセレクタを適用させます。

<ul>
	<li>ココ！</li>
	<li>リスト２</li>
	<li>リスト３</li>
	<li>リスト４</li>
</ul>

<div id="content">
	<h2>最初の項目（pであればfirst-childの対象）</h2>
	<p class="text">指定セレクタ最初の項目</p>
	<p class="text">段落２</p>
	<p class="text">段落３</p>
</div>

li:first-of-type {
	color: #ff0000;
	font-weight: bold;
}
#content .text:first-of-type {
	color: #ff0000;
	font-weight: bold;
}

:last-of-type　指定セレクタの最後の要素にスタイルを適用する

これも last-child と似ていますが、
指定セレクタの最後の要素にセレクタを適用させます。

<ul>
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
	<li>ココ！</li>
</ul>

<div id="content">
	<p class="text">段落１</p>
	<p class="text">段落２</p>
	<p class="text">指定セレクタ最後の項目</p>
	<span>最後の項目（pであればlast-childの対象）</span>
</div>

li:last-of-type {
	color: #ff0000;
	font-weight: bold;
}
#content .text:last-of-type {
	color: #ff0000;
	font-weight: bold;
}

最後だけ padding いらないとか、
最初だけ border 欲しいなー、とかいう時に便利ですね。