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

CSS デザイン

css_first_last

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

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

<ul>
	<li>ココ!</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
</ul>

<p class="text">ココ!</p>
<p class="text">段落2</p>
<p class="text">段落3</p>
li:first-child {
	color: #ff0000;
	font-weight: bold;
}
.text:first-child {
	color: #ff0000;
	font-weight: bold;
}

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

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>ココ!</li>
</ul>

<p class="text">段落1</p>
<p class="text">段落2</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>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
</ul>

<div id="content">
	<h2>最初の項目(pであればfirst-childの対象)</h2>
	<p class="text">指定セレクタ最初の項目</p>
	<p class="text">段落2</p>
	<p class="text">段落3</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>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>ココ!</li>
</ul>

<div id="content">
	<p class="text">段落1</p>
	<p class="text">段落2</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 欲しいなー、とかいう時に便利ですね。

CSS デザイン

関連記事