×

疑似クラスnth-child()とnth-last-child()で思い通りのデザインを実現させる【CSS3】

2016年1月15日 コーディング

nth-childとnth-last-child

HTMLの要素が並んでいる中で、特定の要素にのみを装飾したいというときがありますね。

装飾したい特定の要素に対して、style属性やid属性、クラス属性を使って個別にCSSで装飾すれば実現可能です。

しかし、上記の方法ではphpなどで動的にページを作った場合に要素の数が変化したり、逐一HTMLに記述しなければならなかったり、なかなか融通が利かないところもあります。

そんな時に便利なのが疑似クラスnth-child()とnth-last-child()です。

これらの疑似クラスを使用すれば、静的・動的ページでもCSSだけで特定の要素を装飾可能です。

nth-child()疑似クラス

nth-child()疑似クラスは、E:nth-child(n)という形でCSSに記述します。

E:nth-child(n)
ある要素Eに隣接した子要素の中で先頭から数えてn番目の要素を対してスタイルを適用します。

nで使用可能な値

  • 正の整数
  • nを使用した計算式(nは0を含む正の整数)
  • odd・even

言葉で書いてもよく分からないと思うので、具体的に使用してみます。

●DEMO1:正の整数
例として、nth-child(n)に正の整数である”2″を入れて使用してみます。

DEMO1

#nthcld ul.demo_1 li:nth-child(2){
	font-weight:bold;
	color:red;
	text-decoration:underline;
}

nth-childデモ

li要素が5つ並んでいますが、2番目の要素だけスタイルが変わっています。このように先頭からの順番を指定してスタイルを適用できます。

●DEMO2:nを使用した計算式(nは0を含む正の整数)
次に計算式を入れて使用してみます。

DEMO2

#nthcld ul.demo_2 li:nth-child(2n+1){
	font-weight:bold;
	color:red;
	text-decoration:underline;
}

nth-childデモ2

2n+1のnには0、1、2…が入るので、この場合は1、3、5番目の要素にスタイルを適用できます。

●DEMO3:odd・even
oddとevenという値も使用できます。

DEMO3

#nthcld ul.demo_3 li:nth-child(odd){
	font-weight:bold;
	color:green;
	text-decoration:underline;
}

#nthcld ul.demo_3 li:nth-child(even){
	font-weight:bold;
	color:red;
	text-decoration:underline;
}

nth-childデモ3

oddは奇数、evenは偶数の順番を指定します。

DEMOページを見ると、oddを使うと1、3、5番目の要素にスタイルが適用され、文字色が緑色になっています。

反対にevenを使うと、2、4番目の要素にスタイルが適用され、文字色が赤色に」なっています。

nth-last-child()疑似クラス

nth-last-child()疑似クラスは、nth-child()疑似クラスと同様にE:nth-last-child(n)という形でCSSに記述します。

E:nth-last-child(n)
ある要素Eに隣接した子要素の中で最後尾から数えてn番目の要素を対してスタイルを適用します。

nで使用可能な値

  • 正の整数
  • nを使用した計算式(nは0を含む正の整数)
  • odd・even

●DEMO4:正の整数
nth-last-child(n)に正の整数”2″を入れて使用してみます。

DEMO4

#nthcld ul.demo_1 li:nth-child(2){
	font-weight:bold;
	color:red;
	text-decoration:underline;
}

nth-last-childデモ4

最後尾の要素から2番目の要素にスタイルが適用されています。

●DEMO5:nを使用した計算式(nは0を含む正の整数)
nth-child()の時と同様に計算式を入れて使用してみます。

DEMO5

#nthcld ul.demo_5 li:nth-last-child(-2n+3){
	font-weight:bold;
	color:red;
	text-decoration:underline;
}

nth-last-childデモ5

ここでは-2n+3という計算式を入れています。nはマイナスも使えます。
nには0、1と入るので(2以降は常にマイナスになるので適用されない)、最後尾の要素から1、3番目にスタイルが適用されます。

●DEMO6:odd・even
nth-child()と同様にoddとevenを使用できます。

DEMO6

#nthcld ul.demo_6 li:nth-last-child(odd){
	font-weight:bold;
	color:green;
	text-decoration:underline;
}

#nthcld ul.demo_6 li:nth-last-child(even){
	font-weight:bold;
	color:red;
	text-decoration:underline;
}

nth-last-childデモ6

oddとevenの場合、nth-childと同じようにスタイルが適用されます。

nth-child、nth-last-child使用例紹介

●DEMO7:テーブル行の背景を交互に変える
よくテーブルを見やすくするために、テーブル行の背景を交互に変えているものがあります。

DEMO7

#nthcld table tr:nth-child(odd){
	background: #F7F2DA;
}

#nthcld table tr:nth-child(4){
	color:red;
}

nth-childデモ7

奇数行全体に背景色つけて、偶数行は白のままです。
また、上からから4番目の行のテキストの色を赤にしています。

このようにnth-childを組み合わせて使うことができます。

●DEMO8:2列に並んだボックスの数の変化に対応する
ボックスが2列で並んでおり、ボックスの数が奇数になったり偶数になったり変化する場合にnth-child()、nth-last-child()は力を発揮します。

下記デモを見てください。

DEMO8

#nthcld ul.demo_8 {
	width:500px;
	border:none;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

#nthcld ul.demo_8 li{
	display: block;
	width: 250px;
	padding:15px 10px!important;
	margin:0!important;
	float: left;
	border-bottom:1px solid #cccccc;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

#nthcld ul.demo_8 li:nth-child(odd){
	border-right:1px solid #cccccc;
}

#nthcld ul.demo_8 li:last-child,
#nthcld ul.demo_8 li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

nth-childデモ8

上のようなボックスの内側だけ枠線を入れる場合、まずliタグすべてにborder-bottomで下枠線をつけます。
ここで、nth-last-child(1)、nth-last-child(2)でborder-bottom:noneにしてしまっては、ボックスの数が奇数の時に最後から2番目のボックスの見栄えがおかしくなります。

そこで一度last-childを使いborder-bottom:noneで一番最後にあたるボックスの下枠線を消します。ここは必ず下枠線を消す必要があります。

次がポイントです。

li:nth-last-child(2):nth-child(odd)といった感じで、nth-child()とnth-last-child()をつなげて使います。

最後から2番目でかつ偶数番のものに対してスタイルを適用します。

うーん、便利ですね。

まとめ

いかがでしたか?

nth-child()とnth-last-child()を駆使することで、自由自在にスタイルを指定して、思い通りのデザインを実現可能になります。

nth-child()、nth-last-child()に似た疑似クラスで、nth-of-type()、nth-last-of-type()がありますが、気が乗ったらMIGOブログでも取り上げようと思います。

関連記事