LoginSignup
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-13

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1