Edited at

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

More than 1 year has passed since last update.

このEntryは、G's ACADEMY TOKYOのトレーナー/チューターによる投稿記事です。

授業の中で出たちょっとした質問や疑問、トレーナーが関心のある新技術等を脈絡なく綴っていきます。

css01.jpg


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

どうも皆さまお初です!

フェイスブックで「あぁぁーあーあーあーあーーあうぁあおあーー」と叫んでいるとある人物です!

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

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> ←3番目なのでここの文字色が「赤」に変わる♪
<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)でしたとさ♪