CSS3セレクタ nth-child と nth-of-type の違い
セレクタの中でも使い勝手がいい擬似クラス nth-child と nth-of-type とは？
使い勝手がいいことを言う前に、まず、わりとどうでもいい疑問かもしれませんが、「nth」の言葉の意味を紹介します。
n はnumberという意味で、 th は、4th, 5th, 6th...で使われる th です。
そして、「n 番目の...」という意味になります。
また、よくある疑問が両者の違いです。似ているようで若干違いますので、わかりやすく説明します。
nth-child
一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。nth-of-type
一般的に「E:nth-of-type(n)」という風に表されていて、親要素内で兄弟関係にあるE要素でn番目のものということになります。
引用：CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い｜Webpark
nth-child と nth-of-type の違い
たぶん、文字じゃよくわからないと思いますので、サンプルをお見せします。
HTML
<div> <p>1つ目のpタグ</p> <p>2つ目のpタグ</p> <p>3つ目のpタグ</p> <h6>間にh6タグ</h6> <p>4つ目のpタグ</p> <p>5つ目のpタグ</p> <p>6つ目のpタグ</p> </div>
See the Pen 20160812child by r.shimizu (@r_shimizu) on CodePen.
親要素(div)のn(4)番目の子要素に赤色が適用されています。nth-of-type と比較すると、要素の種類に関係なく上から数えて、n(4)番目に子要素(h6とp)が来た場合にスタイル適用の対象になるところが最大の違いです。
See the Pen 20160812type by r.shimizu (@r_shimizu) on CodePen.
nth-of-typeの場合は、途中で別の種類の要素(h6)が入ってもそれを数えずに、 それまで連続して続いた要素(p)のみを数えてスタイルが適用されます。
(n)に指定できるのは、整数、数式、even(偶数)、odd(奇数)
(n)にはいろいろな種類を指定できます。さっそくサンプルを見ていきましょう。
HTML
<ul> <p>1つ目のpタグ</p> <p>2つ目のpタグ</p> <p>3つ目のpタグ</p> <p>4つ目のpタグ</p> <p>5つ目のpタグ</p> <p>6つ目のpタグ</p> </ul>
See the Pen 20160812kinds_of_n by r.shimizu (@r_shimizu) on CodePen.
ちなみに、nth-child で記入しても同じ結果になります。
oddとevenってどっちが偶数・奇数だっけ？
リストなんかのスタイルを書くときに1行おき（1要素おき）に色を変えたい場合、
oddとかevenを使いますが、どっちがどっちなのか毎回わからなくなります。
ある記事にいい覚え方があったので、載せておきます。
やり方は簡単で、純粋に文字数を数えればOK。
oddは3文字、3は2で割り切れないので「奇数」
evenは4文字、4は2で割り切れるので「偶数」
これだけです。
ついでにいうと、
「きすう」も3文字、「ぐうすう」も4文字なので、そもそも偶数と奇数でどっちがどっちかわからなくなった場合もやっぱり文字数を数えればOKですね。
現場での具体的な使用例 _ リストの一番上の線を消す
border-topを使うと、リストに区切りを入れることができます。
HTML
<ol> <li>menu_1</li> <li>menu_2</li> <li>menu_3</li> <li>menu_4</li> </ol>
See the Pen BzrBRd by r.shimizu (@r_shimizu) on CodePen.
全体を枠で囲む時は上の線がかぶってしまうので消した方がいいと思います。
また、上の線だけ消したいような時があります（見た目がいいからなど）。
そんな時は以下のコードで一番上の線だけ消せます。
See the Pen 20160812_list_2 by r.shimizu (@r_shimizu) on CodePen.
ちなみに、nth-of-type で記入しても同じ結果になります。
さいごに
以上が、CSS3から新設されたセレクタ nth-child と nth-of-type の違いとその使い方でした。
ちゃんと使えると、これまで1行ごとに直接クラスを指定して対応してた作業が省けるでしょう。
実際に使う場合は、「nth-child」でも「nth-of-type」でも変わらないケースが多いと思いますが、正確に仕様を理解していないと、思わぬ挙動に対処できなくなるので、覚えておくといいと思います。
