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

以下のようにすると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だけ対応させればいいだけなら、直接記述する方法でもいいのかも。

Selectivizrを利用する

css3セレクタをIE6〜IE8に対応させることができるJavaScriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。

http://selectivizr.com/

※利用するときはjQueryも一緒に（一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり）

以上、nth-childなどよく使う疑似クラスのまとめでした。