:nth-child 疑似クラスの基本とnth-of-typeとの違い

リスト、テーブルやカラムを並べるデザインに:nth-child/:first-child/:last-childは大活躍する疑似クラスです。

（）の中に変数nを入れれば○番目以降、○番目〜○番目という指定ができて便利です。:nth-childの使い方まとめと勘違いしやすい部分などをまとめました。

使い方の基本

共通のhtml

<div class="wrapper">
		<div class="elem">1</div>
		<div class="elem">2</div>
		<div class="elem">3</div>
		<div class="elem">4</div>
		<div class="elem">5</div>
	</div>

○番目のエレメントを指定する

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

 奇数、偶数を指定する

/* ※奇数 */
.elem:nth-child(odd){
	background-color:aqua;
}

/*又は*/

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

/* ※奇数 */
.elem:nth-child(even){
	background-color:bisque;
}

*又は*/

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

 ○番目以降をすべて指定する

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

 ○番目以前を指定する

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

 ○番目〜○番目を指定

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

3個ずつ（3の倍数）指定する

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

 IE8以下での対応

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

ハックを利用する
３番目を指定する場合

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

:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。

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のトップページに表示あり）

:first-childはIE7から対応

:first-child擬似クラスは、IE７から対応しているためよく使われる擬似クラスですよね。

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。勘違いしやすいので改めてまとめます。

勘違い例

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

<article class="demo1">
		<h2>タイトルなんちゃら</h2>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
		<p>テキストほげほげ</p>
	</article>

css

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

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

【解決方法1】　隣接セレクタを使う

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

【解決方法2】　:first-of-typeを使う

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

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

:nth-childと:nth-of-type

似ている疑似クラスですが違いは以下のようになります。

:nth-childは子要素の中で何番目かを指定できる。
:nth-of-typeは選択した要素の何番目かを指定できる。

:nth-of-typeの例

<div class="wrapper">
		<div class="elem">1</div>
		<div class="elem">2</div>
		<p>P1</p>
		<div class="elem">3</div>
		<div class="elem">4</div>
		<div class="elem">5</div>
		<p>P2</p>
	</div>

.wrapper p:nth-of-type(2){
	background-color:aqua;
}

.wrapperの中にある2番目のp要素を指定できます。

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