初登場となるカテゴリー「主のメモ」
私自身が、全然覚えれず何度も検索してしまう内容のとき、己のために付けます(笑)
自分のために書こうとしてますが、いろんな人に見てもらいたいので丁寧にnth-childとnth-of-typeの違いと使い方から説明します。

それはもう分かります、何番目以降につけるとか逆引き一覧を見たいよって人はこちら。

擬似クラスnth-childとnth-of-typeの違いについて

はじめに、nth-childとnth-of-typeについての解説。
CSSの擬似クラスnth-childとnth-of-typeは、要素の位置に基づいてスタイルを適用するとても便利な機能です。

子要素のn番目にCSSを適用する事ができる疑似クラス【:nth-child(n)】

CSSの擬似クラス:nth-child(n)は、親要素の子要素の位置に基づいてスタイルを適用する擬似クラスです。
nには、子要素の順番を指定します。1番目の子要素は1、2番目の子要素は2、と順番に数えられます。ちなみに奇数・偶数などの指定もできます。
例はこちら。

See the Pen Untitled by wemoir (@wemoir) on CodePen.

ポイントは2,4番目の子要素にはdivが。
cssを3番目はclass名の.childに、5番目はliにかけており、どちらも有効です。

すべての子要素にclass名.childが入っているので3番目が有効なのは納得です。
:nth-child(n) は子要素のn番目にCSSを適用する事ができる疑似クラスなので、途中にdivが混ざっていても「子要素の5番目がli」これが成立しているので、cssが有効となっているワケです。

指定した要素のうちn番目の要素にCSSを適用する擬似クラス【:nth-of-type(n)】

いきなり例から。

See the Pen Untitled by wemoir (@wemoir) on CodePen.

これが:nth-of-type(n)バージョン。

まずは分かりやすい方から。
青色の背景色を指定しているli:nth-of-type(5) は「子要素の中の5番目のliに指定する」といったところでしょうか。2,4番目の子要素はdivなのでノーカン → 7番目(5番目li)の要素に青色の背景色がついているワケですね。

もう一方の黄色の背景色を指定している .child:nth-of-type(3) の方は、正直、使わん(笑)
へぇーこうなるんだーって思いました。
上の理論でいくと「子要素の中の3番目の.child に指定する」のであれば3番目の子要素の色が変わってもいいのにね(笑)
結果論ですが、同じクラス名でもタグは識別しているということでしょうか。。
有識者のみなさん、先輩エンジニアの方々ご指南を orz

今回は例として<ul>の中に<div>を入れました。しかも<li><div>両方に同じclass名を入れています。
実際にはあんまりこんなことはないですね。コードも見にくくなると思うので。

いかがでしょうか？
なんとなくでも nth-child と nth-of-type の違いがご理解いただけたでしょうか。

よく使う倍数や、〜まで、〜以降
nth-childとnth-of-type逆引き一覧集

では、当記事の本題とも言える一覧集。紹介するのはこちら。

• odd,even　奇数・偶数
• first-child,first-of-type　最初
• last-child,last-of-type　最後
• nth-child(n),nth-of-type(n)　n番目
• nth-child(xn),nth-of-type(xn)　xの倍数
• nth-child(3n+1)　3カラムの真ん中
• nth-last-child(n),nth-last-of-type(n)　後ろからn番目
• nth-child(-n+x)　x番目以前
• nth-child(n+x)　x番目以降
• nth-last-child(-n+x)　最後からx個

実際このリストがあればいいと思うけど、一部解説も。
サンプルはまとめてここから。demo
HTMLのコードは共通でコレです。

<ul class="per">
    <li class="child">1</li>
    <div class="child">2</div>
    <li class="child">3</li>
    <div class="child">4</div>
    <li class="child">5</li>
    <li class="child">6</li>
    <li class="child">7</li>
    <li class="child">8</li>
</ul>

奇数・偶数の指定　nth-child(odd),nth-child(even)

これはそのまま、oddで奇数、evenで偶数に指定できます。
ちなみに奇数は nth-child(2n-1) 、偶数は nth-child(2n) でも代用できます。

.per {
    li:nth-child(odd) {
        background-color: #ffea7d;//黄色
    }
}

.per {
    li:nth-child(even) {
        color: #fff;
        background-color: #5c68d1;//青色
    }
}

最初と最後の指定　first-of-type,last-of-type

最初と最後を示す擬似クラスがあります。first-child は nth-child(1) でも代用可。
個人的には複数 nth-child が並ぶ場合は nth-child(1) を使ってます。
last-of-type は投稿のページなど、動的ページ構築の時に覚えておくと便利です。

.per {
    li:first-child {
        background-color: #ffea7d;//黄色
    }
    li:last-child {
        color: #fff;
        background-color: #5c68d1;//青色
    }
}

.per {
    li:first-of-type {
        background-color: #ffea7d;//黄色
    }
    .child:last-of-type {
        color: #fff;
        background-color: #5c68d1;//青色
    }
}

last-of-type はクラス名 .child にかけています。
demoを見ると、4,8番目が青色になっています。
「divの最後の.child」「liの最後の.child」両方にかかっている状態です。こんな風になるんですね。(笑)

xの倍数とひとつ目とxの倍数の指定、3カラムの真ん中だけを指定する方法

倍数は結構使います。
「ひとつ目とxの倍数」と「3カラムの真ん中だけを指定」のHTMLの<ul>内はすべて<li>にしてあります。<div>が混ざっていると思った見せたい形にならなかったので。少し複雑な範囲を擬似クラスのみで指定する際はできれば子要素のタグは揃えたいところ。逆に揃ってない時は擬似クラスでcssを当てるべきではないのかもしれませんね、、

ちょっとした応用(？)になるのですが、必要になる時もあると思うので3カラムの時の真ん中のみ、cssを当てる時の方法もご紹介。

//xの倍数
.per {
    li:nth-child(3n) {
        background-color: #ffea7d;//黄色
    }
}

//ひとつ目とxの倍数
.per {
    li:nth-child(3n+1) {
        color: #fff;
        background-color: #5c68d1;//青色
    }
}

//3カラムの真ん中だけを指定
.per {
    li {
        width: 25vw; //3カラムになるようli幅を調整
    }
    li:nth-child(3n+2) {
        background-color: #ffea7d;//黄色
    }
}

後ろからn番目を指定する方法　nth-last-child(n),nth-last-of-type(n)　

これはまぁそのまま。覚えなくても大丈夫かな(笑)
あったなーくらいで、使うときに見にきてもらえれば。

.per {
    li:nth-last-child(3) {
        color: #fff;
        background-color: #5c68d1;//青色
    }
}

x番目以前、x番目以降を指定する方法　nth-child(n+x),nth-child(-n+x)

これも<ul>内はすべて<li>に。demoは3番目以前青色、6番目以降黄色をあてています。
2番目を<div>のままにしていたらcssあたらなかったです。これも今までそんな風に使ったことなかったので新たな発見です。

.per {
    li:nth-child(-n+3) {
        color: #fff;
        background-color: #5c68d1;//青色
    }
    li:nth-child(n+6) {
        background-color: #ffea7d;//黄色
    }
}

最後からx個を指定する方法　nth-last-child(-n+x)

ラスト！
x番目以降を指定する nth-child(-n+x) とごちゃつきそうな、最後からx個を指定する nth-last-child(-n+x)
冷静に日本語で考えればどちらを使うのが正しいのか見えてくるはずです。

これも<ul>内はすべて<li>に。demoは最後から5個にcssをあてています。

.per {
    li:nth-last-child(-n+5) {
        color: #fff;
        background-color: #5c68d1;//青色
    }
}

擬似クラスを用いて規則的にcssを指定する方法　まとめ

いかがでしたでしょうか。
個人的にはこれは結構見るなーって感じにまとめれた気がします。覚えんかいって声はなしで。
他にも擬似クラスはいっぱいあるので追々紹介したいですね。
あーーつかれたーーーー。

ではまた。