Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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)でしたとさ♪

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away