1. Qiita
  2. 投稿
  3. HTML

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

  • 1
    いいね
  • 0
    コメント

この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)でしたとさ♪