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

  • 0
    Like
  • 0
    Comment
    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)でしたとさ♪