ホームページ制作MATSUTE BLOG

この記事は「2021年01月06日」に書かれた記事です

1. 何番目の処理（nth-childとnth-of-typeの違い）
2. 一番目と一番最後
3. 偶数と奇数
4. 〇の倍数での設定
5. 後ろからn番目
6. こんなケースも・・・

1．何番目の処理（nth-childとnth-of-typeの違い）

最初にざっくり説明すると

どういうこと?

具体例

※samp-nthは仮のclass名（任意）です。

どちらも「.samp-nth」の「pタグ」に対して背景色を設定していますが、背景色が指名しているpタグは別々です。一体どういうことなのか見てみましょう

HTML

<section class="samp-nth">
<h1>見出し</h1>
<p>ちょっとしたキャッチコピー</p>
<p>ここを指定したい</p>
</section>

CSS
.samp-nth p:nth-child(2) {background-color: #DDD; }
.samp-nth p:nth-of-type(2) { background-color: #FFF; }

.samp-nth p:nth-child(2) {background-color: #DDD; }

nth-childは「全体の何番目の要素か」という指定でした。
つまり、「.samp-nth」の中の「2番目」の要素となるPタグに対して、背景色を#DDD（グレー）を変えてほしいという指定になっています。

1番目の要素は<h1>
2番目の要素は「ちょっとしたキャッチコピー」の<p>タグとなるため、背景色が#DDD（グレー）となっています。もし、2番目の要素にあたる箇所にｐタグがなかった場合、設定は無視されます。

HTML

<section class="samp-nth">
<h1>見出し</h1>
<h2>見出し</h2>←2番目は<p>タグではないので背景色は変わらない
<p>ちょっとしたキャッチコピー</p>←3番目の要素の<p>タグとなるため背景色は変わらない
<p>ここを指定したい</p>
</section>

CSS

.samp-nth p:nth-child(2) {background-color: #DDD; }

.samp-nth p:nth-of-type(2) { background-color: #FFF; }

nth-of-typeは「同一要素の何番目か」を指定でした。
つまり「.samp-nth」の領域内にあるタグ（上記の場合「ｐ」タグ）のうち、2番目のｐタグという指示になるので「ここを指定したい」という文言が設定した＃FFF（白背景）に変更されています。

nth-childとnth-of-typeの違いを確認したところで、よく使う設定を見てみましょう。

2．一番目と一番最後

一番目の要素を指定する場合

nth-child(1)やnth-of-type(1)でも設定としてはかかりますが、一番目については「first-child」「first-of-type」が用意されています。

:first-child
:first-of-type

具体例

HTML

<section class="samp-nth02">
<h2>見出し</h2>
<p>ちょっとしたキャッチコピー</p>
<p>ここを指定したい</p>
</section>

CSS

.samp-nth02 p:first-child {background-color: #DDD; }
.samp-nth02 p:first-of-type{background-color: #FFF; }

.samp-nth02 p:first-child {background-color: #DDD; }

一番目の要素が<p>タグではなく<h2>のため無視されています。

HTML

<section class="samp-nth02b">
<h2>見出し</h2>
<p>ちょっとしたキャッチコピー</p>
<p>ここを指定したい</p>
</section>

CSS

.samp-nth02b h2:first-child {background-color: #DDD; }

1番目の要素である<h2>に背景色を設定したので、背景色がグレーに変わりました。

.samp-nth02 p:first-of-type{background-color: #FFF; }

Pタグの最初の要素に、背景色#FFF（白）がかかっています。

一番最後の要素を指定する場合

※以下同じような説明が続くため、割愛します。使い方は同じです。

:last-child
:last-of-type

3．偶数と奇数

奇数の要素を指定する場合

:nth-child(odd)
:nth-of-type(odd)

偶数の要素を指定する場合

:nth-child(even)
:nth-of-type(even)

4．〇の倍数での設定

:nth-child(n)
:nth-of-type(n)

具体例

ここは少し説明を加えたいと思います。
たとえば、3の倍数の時だけ（3 6 9 1２…）指定したい場合は下記のように設定します。

:nth-child(3n)
:nth-of-type(3n)

表示

• 1番目の要素
• 2番目の要素
• 3番目の要素
• 4番目の要素
• 5番目の要素
• 6番目の要素
• 7番目の要素
• 8番目の要素
• 9番目の要素

html

<ul class="samp-nth03">
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
<li>6番目の要素</li>
<li>7番目の要素</li>
<li>8番目の要素</li>
<li>9番目の要素</li>
</ul>

CSS

ol.samp-nth03 li:nth-of-type(3n) {background-color: #DDD; }

さらに、最初に「1」などを足して計算したいときは下記のように設定します。

:nth-child(3n+1)

指定したタグを、1から3つおきに設定がかかります。

表示

• 1番目の要素
• 2番目の要素
• 3番目の要素
• 4番目の要素
• 5番目の要素
• 6番目の要素
• 7番目の要素
• 8番目の要素
• 9番目の要素

html

<ul class="samp-nth04">
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
<li>6番目の要素</li>
<li>7番目の要素</li>
<li>8番目の要素</li>
<li>9番目の要素</li>
</ul>

CSS

ul.samp-nth04 li:nth-of-type(3n+1) {background-color: #DDD; }

では、もう一つ

:nth-child(3n+2)

と設定するとどうなるのでしょうか。

表示

• 1番目の要素
• 2番目の要素
• 3番目の要素
• 4番目の要素
• 5番目の要素
• 6番目の要素
• 7番目の要素
• 8番目の要素
• 9番目の要素
• 10番目の要素

html

<ul class="samp-nth05">
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
<li>6番目の要素</li>
<li>7番目の要素</li>
<li>8番目の要素</li>
<li>9番目の要素</li>
</ul>

CSS

ul.samp-nth05 li:nth-of-type(3n+2) {background-color: #DDD; }

2から始まる3の倍数、2、5、8の背景色が変わりました。

5．後ろからn番目

最後から2番目の時だけ設定を入れたいです！

ということもあるかもしれません。そんな時は下記のように設定します。

:nth-last-child(2)
:nth-last-of-type(2)

もっと考えると、後ろから3番おきにということもあるかもしれません。
すみません。ちょっとどんなケース化は思いつきませんが。笑
そんな時は下記の設定になります。

:nth-last-child(3n)
:nth-last-of-type(3n)

6．こんなケースも・・・

フッターなどで<li>タグでメニューを表示した際、

最初だけ区切りの線が必要ないんだよな・・・

と思ったことありませんか？
もちろん、そんな時は下記で消すことが可能です。

具体例

• メニュー1
• メニュー2
• メニュー3
• メニュー4
• メニュー5

HTML

<ul class="samp-nth06">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>

CSS

ul.samp-nth06 li {border-left:2px solid #666;} 
ul.samp-nth06 li:first-of-type {border-left:none; }

いちいち、打ち消すの面倒なんだなというときは「:not()」を使って取り除くことが可能です。

li:not(:first-child) {
border-left:1px solid #CCC;
}

表示

• メニュー1
• メニュー2
• メニュー3
• メニュー4
• メニュー5

HTML

<ul class="samp-nth07">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>

CSS

ul.samp-nth07 li:not(:first-child) { border-left:2px solid #666; }

ん？　これって

気が付いちゃいました？
これ、最初のタグに対しても設定しておきたい場合は、別々に書かないといけないんですよね。

li {
padding: 0 1em;
}
li:not(:first-child) {
border-left:1px solid #CCC;
}

推奨的に「できるだけ打ち消さないCSSを書こう」という前提があるみたいなのですが、打ち消しが明確に禁止されているわけではありませんし、個人的には

• わかりやすく
• CSS が煩雑ならず
• 全体としてCSSが短く（少なく）なるのであれば

ケースバイケースでよいのではないかと思います。