何番目の～、最初の～といった疑似クラスの便利な使い方

更新日：2017年4月15日

3番目の要素だけ色を変えたいだとか、最初の要素だけ色を変えたいだとかって時に、その都度classを当てるのは結構面倒臭いですよね。
その数が何十個も何百個もある時なんて尚更です。

そんな時に便利なCSSの機能があります。
それは疑似クラスと呼ばれるものです。

百聞は一見に如かずということで、実際にどういったものか見て頂きましょう。
これから特に汎用性の高い全6種の疑似クラスをご紹介しますが、HTMLは全て下記のHTMLで共通です。


	セイコー
	シチズン
	カシオ
	オリエント
	ロレックス

なんてことない平凡なソースです。
名前は何でもいいのですが、今回は仮にpseudoという名前をulタグにつけています。

.pseudo li:nth-child(2) {
	color: #0F6;
}

上から数えて○番目の要素の色を変える疑似クラス（CSS）です。
今回の例では上から2番目の要素の色を変えてみます。
上から3番目の要素の色を変えたいという場合は
:nth-child(3)
と数字を打ち変えてあげればOKです。

.pseudo li:nth-last-child(2) {
	color: #0F6;
}

下から数えて○番目の要素の色を変える疑似クラス（CSS）です。
今回の例では下から2番目の要素の色を変えてみます。
下から3番目の要素の色を変えたいという場合は
:nth-last-child(3)
と数字を打ち変えてあげればOKです。

.pseudo li:first-child {
	color: #0F6;
}

最初の要素の色を変える疑似クラス（CSS）です。
個人的には一番使う頻度の高い疑似クラスです。

.pseudo li:last-child {
	color: #0F6;
}

最後の要素の色を変える疑似クラス（CSS）です。

.pseudo li:nth-child(odd) {
	color: #0F6;
}

奇数の要素の色を変える疑似クラス（CSS）です。
今回の例でいうと1番目、3番目、5番目の要素の色が変わります。
tableの背景色を交互に違う色にして、見やすくする時に使われるケースをよく見かけます。

.pseudo li:nth-child(even) {
	color: #0F6;
}

偶数の要素の色を変える疑似クラス（CSS）です。
今回の例でいうと2番目、4番目の要素の色が変わります。

よく使われる奇数の要素の色を変える疑似クラスと、偶数の要素の色を変える疑似クラスを併せてtableを装飾するサンプルソースのご紹介。
併せ技でこうした使い方も出来ます。

HTMLは下記のように記述します。



	セイコー
	国産


	シチズン
	国産


	カシオ
	国産


	オリエント
	国産


	ロレックス
	海外産

CSSは下記のように記述します。

.pseudo tr:nth-child(odd) {
	background-color: #0F6;
}

.pseudo tr:nth-child(even) {
	background-color: #F60;
}

奇数のtrの背景色を黄緑に、偶数のtrの背景色をオレンジ色にしています。
1つ1つそれぞれのtr要素にclassを当てている訳ではないのに、交互に背景色が変わっていますね。

効率化が図れてとっても便利な疑似クラス、使い所はかなりあるかと思います。
是非ご活用下さい！

人気記事