順番を指定するCSSを使い倒す！-ほにゃらら-childとほにゃらら-of-typeの違いとその辺の便利な使い方-

HTML&CSS

2017.11.02

最近向かいの席のkagataの机の上にある犬の写真が気になっているyanagimachiです。
犬好きなのだろうか・・・
さて今回はプライベートで自分用にまとめたこのあたりの情報が2年ほど経ってもアクセス数がすごいので、バシャログでまとめ直してみたいと思います。
２年も経っているので、もっとわかりやすくまとめられるはず！

どんな種類があるの？

種類	-child	-of-type
最初	:first-child	:first-of-type
最後	:last-child	:last-of-type
前からX番目	:nth-child(X)	:nth-of-type(X)
後ろからX番目	:nth-last-child(X)	:nth-last-of-type(X)
１個だけ	:only-child	:only-of-type

調べてみたところこれだけの種類があります。
全部は覚えられないよ！と思うかもしれませんが、実は10個全て覚える必要はありません。
種類＆ほにゃらら-childとほにゃらら-of-typeの違いがわかれば、組あわせでわかっちゃうんです。

ほにゃらら-childとほにゃらら-of-typeの違いは何？

:first-childと:first-of-typeで違いを見てみたいと思います。

//HTML
<dl>
<dt>dt</dt>
<dd>１番目のdd</dd>
<dd>２番目のdd</dd>
<dd>３番目のdd</dd>
</dl>

１番目のddを指定する場合、dd:first-childを使うことはできません。
使うのはdd:first-of-typeです。
ほにゃらら-childは要素すべての順番を指定するもので、例のHTMLの場合は最初の子要素はdtなので指定できないわけです。
それに対して、ほにゃらら-of-typeは特定の要素（今回だとdd）での順番を指定する時に使います。

まとめ

ほにゃらら-child：要素すべての順番を指定する
ほにゃらら-of-type：特定の要素の順番を指定する

nth-ほにゃららとは？

前から何番目の要素を指定したい時に使います。
liの2番目を指定したい時はli:nth-ほにゃらら(2)となります。

先ほどの:first-ほにゃららと同じ指定することもでき、:first-childと同じなのは:nth-child(1)です。

倍数を指定する

カラムレイアウトなどで3の倍数の時だけmargin-rightを0にしたい時などに使います。
その場合、:nth-ほにゃらら(3n)となります。

奇数と偶数を指定する

奇数を指定したい時には:nth-ほにゃらら(odd)、偶数を指定したい時には:nth-ほにゃらら(even)を使います。
奇数と偶数の英語がどちらかわからなくなる、という時は奇数の英語は奇数(oddなので3)で偶数の英語は偶数（evenなので4）と考えると覚えやすいです:)

先ほど出てきた倍数の２の倍数である:nth-child(2n)は:nth-child(even)と同じです。

まとめ

X番目：nth-ほにゃらら(X)
Xの倍数：nth-ほにゃらら(Xn)
奇数：nth-ほにゃらら(odd)
偶数：nth-ほにゃらら(even)

nth-last-ほにゃららとは？

後ろから何番目の要素を指定したい時に使います。
liの後ろから2番目を指定したい時はli:nth-last-ほにゃらら(2)となります。

倍数も指定する

こちらも.item:nth-last-ほにゃらら(3n) で後ろから指定ができます。
とはいえ、使ったことはないです。

奇数と偶数を指定もできる

後ろから奇数を指定したい時には:nth-last-ほにゃらら(odd)、偶数を指定したい時には:nth-last-ほにゃらら(even)を使います。
とはいえ、こちらも使ったことはないです。

まとめ

後ろから指定：nth-last-ほにゃらら

ちょっと寄り道

順番を指定するCSSと合わせて使うと便利な:not()

最初だけ（:first-child）border-topが必要ないリストなどの時に便利です。

1個だけ要素がある

例えばボタンが複数ある時には幅100pxに、1つしかない時は大きめに150pxにしたい時などには:only-ほにゃららを使います。

子要素がない時

子要素がない時には:emptyを使います。

まとめ

ほにゃらら以外：not(ほにゃらら)
1個だけ要素がある：only-ほにゃらら
子要素がない：empty

ここまでわかったら、ぜひ＋αで知っておきたい順番の指定

倍数の次の要素を指定する

カラムレイアウトなどで3の倍数の次の要素だけ指定したい時があります。その場合、:nth-ほにゃらら(3n+1)となります。

X番目から最後まで（X番目以降）

3番目以降は非表示にしておく、なんていう時に使います。

最初からX番目まで（X番目以前）

先ほどのX番目以降とは逆で、デフォルトを非表示にしてX番目以前は表示するなんていう時に使います。

最後からX番目以前

デモでご確認ください。

最後からX番目まで