nth-childの使い方・要素の範囲や特定の要素を指定する方法

2015-04-182024-09-07

WEB Tips デザイン・コーディング

この記事にはプロモーションが含まれています

nth-childは親要素の中で何番目の子要素かによってスタイルを変えることができるCSSの疑似クラスです。nth-child擬似クラスを使えば、リスト、テーブルデザイン、複数カラムをデザインする時に柔軟に対応できます。

またHTMLの構造を変えず、クラスやIDを付ける必要がないので、コードがシンプルになるというメリットもあります。

nth-childの使い方と勘違いしやすい部分などをまとめました。

nth-childと似たnth-of-typeセレクタの使い方はこちらの記事が参考になります。>> :nth-of-typeの活用方法、:nth-childとの違い

nth-childで奇数、偶数を指定する

要素の奇数ごとにCSSを適用する場合はnth-child(odd）を使います。

.elem:nth-child(odd){
	background-color:aqua;
}

以下のように記述しても同じように奇数の要素を選択できます。

.elem:nth-child(1+2n){
	background-color:aqua;
}

偶数の要素を選択する場合はnth-child(even）を使います。

.elem:nth-child(even){
	background-color:bisque;
}

以下の記述でも偶数の要素を選択できます。

.elem:nth-child(2n){
	background-color:bisque;
}

tableの奇数行・偶数行に背景色をつける例

nth-childのodd,evenを使うのによく使われるのはテーブルレイアウトじゃないでしょうか。奇数行または偶数行に背景色をつけることで可読性が高くなるためよく使われる手法です。

See the Pen nth-child奇数偶数行の指定 by mixtaro (@mixtaro) on CodePen.

tr:nth-child(odd) {
  background: #92DCE5;
}
tr:nth-child(even) {
  background: #EEE5E9;
}

n番目の要素にスタイルを適用する

nth-child()の中に整数nを入れれば、親要素の中のn番目の子要素を指定することができます。

:nth-child(n)

.elem:nth-child(3){
	background-color:aqua;
}

n番目以降の要素にスタイルを適用する

n番目よりも後ろのすべての要素にスタイルが適用されます。

:nth-child(n+1)

.elem:nth-child(n+3){
	background-color: aqua;
}

n番目以前の要素にスタイルを適用する

.elem:nth-child(-n+3){
	background-color:aqua;
}

nth-child(-n+3)は、nが3以下の子要素にマッチするため、最初の3つの子要素にスタイルが適用されます。

nは0から始まるため-n+3は1から3までの整数となり、1番目から3番目までの子要素に適用されます。

2番目から4番目の要素にスタイルを適用する

nth-child擬似クラスを複数指定して子要素の範囲を指定することができます。

.elem:nth-child(n+2):nth-child(-n+4){
	background-color:aqua;
}

:nth-child(n+2)は、最初の子要素を除く2番目以降のすべての子要素にマッチするため、2番目からの子要素を選択することになります。

:nth-child(-n+4)は、最初の4つの子要素にマッチするため4番目までの子要素を選択することになります。

この2つの擬似クラスを組み合わせることで、2番目から4番目までの子要素にスタイルを適用することができます。

3個ずつ、3の倍数の要素にスタイルを指定する

:nth-child(3n)のnth-child擬似クラスを使用します。

.elem:nth-child(3n){
	background-color:aqua;
}

:nth-child(3n)と指定することで、3個ずつ（3の倍数）の子要素に対して、一括でスタイルを適用することができます。

See the Pen nth-child擬似クラス・3の倍数 by mixtaro (@mixtaro) on CodePen.

以下のようにすると3個ずつスタイルを変えることができます。

.parent > :nth-child(3n) {
  background-color: #F0B67F;
}

.parent > :nth-child(3n-1) {
  background-color: #FE5F55;
}

.parent > :nth-child(3n-2) {
  background-color: #C7EFCF;
}

:nth-childが効かない？時の確認することと間違った例

:nth-childの指定を間違えた例

:nth-childを間違えて指定した例を参考に挙げてみます。下記のようにparentというdiv要素の中の子要素.colを並べています。

<div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

子要素.colを奇数ごとに文字を変えたい場合。

/* 間違えた記述 */
.parent:nth-child(2n+1) {
  color: red;
}

上記のように親要素にnth-childを指定していますが、意図した通りにはなりません。

:nth-child擬似クラスは子要素に対してのみ有効なため、子要素に:nth-childを指定する必要があります。

/* 正しい記述 */
.parent > *:nth-child(2n+1) {
  color: red;
}

:nth-childが効かない時に確認すること

:nth-childが期待通りに動作しない場合に確認することは、セレクタの階層構造や、指定された要素が正確であるか、またはセレクタにスペルミスがないかを確認します。

スペルミス（最も単純な凡ミスですがありがち）
対象となる親要素が正確か
子要素の位置が正確か

:nth-childを確認するツール

CSS Tricksにnth-childの動作確認をできるツールがあります。

https://css-tricks.com/examples/nth-child-tester/

Recipesの下にある項目をクリックすると、該当する要素のスタイルが変わります。日本語翻訳するとわかりやすいです。

最後の子要素にだけスタイルを適用する :last-child

最後の子要素にだけスタイルを適用するには、:last-child擬似クラスを使用します。:last-childは親要素の中で最後の子要素にスタイルを適用することができます。

.parent > :last-child {
  background-color: red;
}

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

:first-child擬似クラスは、親要素の中で最初の子要素にスタイルを適用する擬似クラスです。IE7から対応しているためよく使われる擬似クラスですよね。

/* .parent内の最初の子要素の背景色を赤にする */
.parent > :first-child {
  background-color: red;
}

:fist-childの勘違い例

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。勘違いしやすい例をあげます（私も昔勘違いしてました）。

.content内にある最初のp要素にスタイルを適用したい場合。

<div class="content">
	<h2>コンテンツタイトル</h2>
	<p>テキストほげほげ</p>
	<p>テキストほげほげ</p>
	<p>テキストほげほげ</p>
</div>

以下のようなCSSを書いたとします。

.content p:first-child{
	color:#f00;
}

.contentの最初の子要素は「h2」なので適用されません。

.content内の最初のpタグにスタイルを適用したい場合は以下のような方法になります。

【正しいスタイル適用方法1】隣接セレクタを使う

.content h2+p{
	color:#f00;
}

【正しいスタイル適用方法2】　:first-of-typeを使う

:first-of-type疑似クラスとは、指定した種類の最初の要素に適用される。
（対応しているのはIE9以降）

.content p:first-of-type{
	color:#f00;
}

nth-childと似たnth-of-typeセレクタの使い方はこちらの記事が参考になります。>> :nth-of-typeの活用方法、:nth-childとの違い

IE8以下での対応

:nth-child疑似クラスはIE8以下は対応していないため、ハックを使うかjQueryを使うかという対応になります。

ハックを利用する

:first-childは ie8に対応しているため、３番目を指定する場合は以下のように指定することでIE8以下でもスタイルを適用することができます。

ul > *:first-child + * + * {
	color : #f00;
}

JavaScriptを使わずに解決したい場合はこの方法でいけますが、n番目ごとになどのスタイルに対応するのは難しいですね。

jQueryで対応する

jQueryで「addClass」を定義して対応することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".elem:nth-child(3n)")
	.addClass("elem-third");
});
</script>

３つごとのliに「elem-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。