CSSJavaScriptWordPressPHPgulp順番を指定するCSSを使い倒す!-ほにゃらら-childとほにゃらら-of-typeの違いとその辺の便利な使い方-HTML&CSSyanagimachi2017.11.02最近向かいの席のkagataの机の上にある犬の写真が気になっているyanagimachiです。犬好きなのだろうか・・・さて今回はプライベートで自分用にまとめたこのあたりの情報が2年ほど経ってもアクセス数がすごいので、バシャログでまとめ直してみたいと思います。:only-of-type調べてみたところこれだけの種類があります。全部は覚えられないよ!と思うかもしれませんが、実は10個全て覚える必要はありません。種類&ほにゃらら-childとほにゃらら-of-typeの違いがわかれば、組あわせでわかっちゃうんです。ほにゃらら-childとほにゃらら-of-typeの違いは何?:first-childと:first-of-typeで違いを見てみたいと思います。//HTML<dl><dt>dt</dt><dd>1番目のdd</dd><dd>2番目のdd</dd><dd>3番目のdd</dd></dl>1番目のddを指定する場合、dd:first-childを使うことはできません。使うのはdd:first-of-typeです。ほにゃらら-childは要素すべての順番を指定するもので、例のHTMLの場合は最初の子要素はdtなので指定できないわけです。それに対して、ほにゃらら-of-typeは特定の要素(今回だとdd)での順番を指定する時に使います。CodePen.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)と考えると覚えやすいです:)先ほど出てきた倍数の2の倍数である:nth-child(2n)は:nth-child(even)と同じです。CodePen.nth-last-ほにゃららとは?後ろから何番目の要素を指定したい時に使います。liの後ろから2番目を指定したい時はli:nth-last-ほにゃらら(2)となります。後ろから指定ができます。いえ、使ったことはないです。奇数と偶数を指定もできる後ろから奇数を指定したい時には:nth-last-ほにゃらら(odd)、偶数を指定したい時には:nth-last-ほにゃらら(even)を使います。いえ、こちらも使ったことはないです。順番を指定するCSSと合わせて使うと便利な:not()最初だけ(:first-child)border-topが必要ないリストなどの時に便利です。1個だけ要素がある例えばボタンが複数ある時には幅100pxに、1つしかない時は大きめに150pxにしたい時などには:only-ほにゃららを使います。子要素がない時には:emptyを使います。倍数の次の要素を指定するカラムレイアウトなどで3の倍数の次の要素だけ指定したい時があります。その場合、:nth-ほにゃらら(3n+1)となります。X番目から最後まで(X番目以降)3番目以降は非表示にしておく、なんていう時に使います。最初からX番目まで(X番目以前)先ほどのX番目以降とは逆で、デフォルトを非表示にしてX番目以前は表示するなんていう時に使います。最後からX番目以前デモでご確認ください。最後からX番目までデモでご確認ください。CodePen.まとめここまで読めばほにゃらら-childとほにゃらら-of-typeにはだいぶ詳しくなれたかと思います。業務やプライベートの開発で使ってみてください!この記事を共有するシェアTweetこの記事を読んだ人にオススメSVG画像のHTMLでの使い方HTML&CSSkoya2021.03.01cssでPhotoshopのように画像にエフェクトを追加する方法HTML&CSSkoya2020.04.09間違いやすいHTML5の要素を再確認HTML&CSSkoya2020.02.20Sassでテーマ用CSSを作成するHTML&CSSfujihara2019.10.31バシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。