「nth-child()」の便利な使い方

このEntryは、G's ACADEMY TOKYOのトレーナー/チューターによる投稿記事です。
授業の中で出たちょっとした質問や疑問、トレーナーが関心のある新技術等を脈絡なく綴っていきます。

#「nth-child()」の便利な使い方 #

どうも皆さまお初です！
フェイスブックで「あぁぁーあーあーあーあーーあうぁあおあーー」と叫んでいるとある人物です！

今回はCSS３で導入された疑似クラスについて簡単にご紹介しちゃいます！

cssを一つずつ個別に書いてもいいのですが、それだとちょっと効率が悪くなることもあります。
そんなときに「nth-child()」を使いこなすと簡単にスタイルを変化させることができます♪

今回の例で使うマークアップ（html）

test1.html

<h1>かくだてさんとゆかいな仲間たち</h1>
<ul class="sample">
 <li>栗林怪物</li>
 <li>しんたん</li>
 <li>あやなし</li>
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>
</ul>

「nth-child()」の特徴としては細かな設定が色々出来ること♪
具体的には下記のように使えます。

・偶数だけを指定

※わかりやすいように[ul.sample]としていますが[.sample]でもOK！

test1.css

ul.sample li:nth-child(even) {
    color: #f00;
}

この場合だと

test1.html

<ul class="sample">
 <li>栗林怪物</li>
 <li>しんたん</li>　←偶数番目なのでここの文字色が「赤」に変わる♪
 <li>あやなし</li>
 <li>マドンナともちゃん</li>　←偶数番目なのでここの文字色が「赤」に変わる♪
 <li>いけめん西元隊長</li>
</ul>

---

test1.css

ul.sample li:nth-child(odd) {
    color: #f00;
}

test1.html

<ul class="sample">
 <li>栗林怪物</li> ←奇数番目なのでここの文字色が「赤」に変わる♪
 <li>しんたん</li>　
 <li>あやなし</li> ←奇数番目なのでここの文字色が「赤」に変わる♪
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>　←奇数番目なのでここの文字色が「赤」に変わる♪
</ul>

---

そして「:nth-child(数字)」を入れて使うことで個別に指定も可能です。

具体例

test1.css

ul.sample li:nth-child(3) {
    color: #f00;
}

test1.html

<ul class="sample">
 <li>栗林怪物</li> 
 <li>しんたん</li>　
 <li>あやなし</li> ←３番目なのでここの文字色が「赤」に変わる♪
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>　
</ul>

そしてこれ以外にも「:nth-of-type(n)」という便利な疑似クラスも存在しています。
これは現れる要素に対して指定が出来ます。

test1.html

<div class="kuribayasi_box">
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>
</div>

test1.css

.kuribayasi_box p:nth-of-type(3){
	font-size:50px;
	color:#f00;
}

とすると…

test1.html

<div class="kuribayasi_box">
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>　←この部分がフォントサイズ50px＋文字色が「赤」になる
	<p>栗林</p>
	<p>栗林</p>
</div>

■まとめ
ざっくりと紹介しましたが、「nth-child(n)」、「:nth-of-type(n)」を活用すれば、「●番目の要素」「先頭から●番目」、「最後から●番目」、「奇数」、「偶数」、「数字の倍数指定」というような指定ができるようになり、表現の幅が広がります♪

便利な面としてはclassをたくさん使わなくてよくなったり、コードがすっきりしたりという恩恵があります♪

あと、最初のうちは「nth-child(n)」、「:nth-of-type(n)」が混同してしまうかもしれませんが、まずは触ってチャレンジしてみてください♪

余談ですが
[even]　←偶数
[odd]　←奇数
の簡単な覚え方は

[even]が4文字なので偶数
[odd]が3文字なので奇数

と覚えて間違えることも多少は少なくなると思います。

以上、G's ACADEMY TOKYOチューター「うわぁぁぁー」によるCSS3の疑似クラスの便利なお話（Trainer's Recipe）でしたとさ♪