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

更新日: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の背景色を交互に違う色にする疑似クラス

よく使われる奇数の要素の色を変える疑似クラスと、偶数の要素の色を変える疑似クラスを併せて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を当てている訳ではないのに、交互に背景色が変わっていますね。

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

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