「CSSのnth-of-typeとnth-childの違いってなんだっけ？」
「CSSの擬似クラスって何？」
この記事はそんな方へ向けて書いています。
Webサイトを作る際の必須知識スタイルシートCSS。
その中で使いこなせるととても便利な擬似クラスを使った命令方法があります。
しかし、便利な反面、同じようで微妙に違い混同しやすい為敬遠しがちな「nth-of-type」と「nth-child」といった擬似クラスがあります。
この記事では、「nth-of-type」と「nth-child」を実装サンプル付きで、初心者でも直感的に理解出来るように解説しています。
Webデザイン初心者の方はもちろん、忘れてしまった時のリファレンスとして是非ご活用下さい！
目次
CSSとは？
CSS（Cascating Style Sheet）とは、HTMLの表示を制御して見た目を整形する為の言語です。
Webサイトの文字の大きさや色、画面上の要素の配置の調整など、主にそういったWebサイトの見た目のデザインをコントロールする為に使います。
CSSの擬似クラスとは？
Webサイトの骨格であるHTML。
CSSはHTMLに対して、どの様な表示の制御を「どの部分に行うか？」という事を「セレクター」を使って指定します。
一番基本的なセレクターとして、タイプセレクターがあります。
「タイトルの文字色を目立つ様に赤色にしたい！」
という場合、まずタイトルをHTMLのh1タグで囲みます。
次に、CSSでそのh1タグをセレクト（選択）し「赤色にする」という命令を書きます。
これでWebサイトのタイトルの文字の色を赤色にする事ができます。
タイプセレクターはこのように、HTMLに命令を伝える為にタグを直接セレクトする方法のことをいいます。
それに対して擬似クラスとは、指定する要素が特定の状態にある場合にスタイルを指定する方法です。
「上から数えて奇数番目のタイトルは赤色にして、偶数番目のタイトルは青色にしたい」
「下から2番目のタイトルは文字の大きさを太字にしたい」
そういった特定の状態にあるHTMLのタグに対して命令をしたい場合、とても重宝する便利なCSSのセレクターです。
子要素をカウントして指定する疑似クラス一覧
| :nth-child() | 要素内の指定した番号の要素 |
|---|---|
| :last-child | 要素内の最後要素 |
| :only-child | 特定の要素が一つだけ含まれる要素 |
| :nth-last-child() | 要素内を後ろから数えて指定した番号にある要素 |
| :nth-of-type() | 同一要素で指定した番号にある要素 |
| :nth-last-of-type() | 同一要素で後ろから数えて指定した番号にある要素 |
| :first-of-type | 同一要素で最初にあたる要素 |
| :last-of-type | 同一要素で最後にあたる要素 |
| :only-of-type | 一つだけ存在する要素 |
混同しやすいnth-childとnth-of-typeの違い
E:nth-child → 要素内の指定した番号の要素にCSSを適用する
E:nth-of-type → 同一要素で指定した番号にある要素にCSSを適用する
（Eには指定する要素、divやp、li等が入ります。）
正直感覚的に使用している僕も、文字だけで理解しようとすると、
「？？？」
となります。
百聞は一見に如かず。
文字の説明だけだとイメージが沸かないので、実際に試してみたサンプルを作ってみました。
nth-childとnth-of-typeを使ったコードサンプル
nth-childとnth-of-typeの実装サンプル
See the Pen KKPajby by koganesan (@koganesan) on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
nth-childは、指定した要素の兄弟要素もカウントに含まれ、最終的にマッチする要素がある場合にCSSが適用されます。
上記サンプルのnth-childは、dlタグの中の子要素dtに対してCSSが適用される様に指定しています。
適用結果を見てみると、dt、dd関係なく、兄弟にあたる要素がカウントされています。
その結果、上から3番目の子要素にあたるdtが存在するので、dtに対してCSSが適用されています。
もしdlの上から3番目にあたる子要素がddの場合はCSSの指定が適用されません。
nth-childは、指定した要素（上記例ならdt）の兄弟要素を含めてカウントされCSSの指定が適用されます。
nth-of-typeは、指定した要素のみがカウントされ、最終的にマッチする要素がある場合にCSSが適用されます。
nth-of-typeの適用結果を見てみると、dtのみがカウントされ、dl内の上から3番目のdtに対してCSSが適用されています。
nth-of-typeは、指定した要素（上記例ならdt）のみがカウントされCSSの指定が適用されます。
nth-child、nth-of-typeはこういった違いがあります。
混同しやすいですが、状況に合わせて上手く使い分けできる様に把握しておく事で、効率の良いコードが書ける様になります。
まとめ
「nth-child」
指定した要素の兄弟要素もカウントに含まれ、最終的にマッチする要素がある場合にCSSが適用される。
「nth-of-type」
指定した要素のみがカウントされ、最終的にマッチする要素がある場合にCSSが適用されます
「CSSのnth-of-typeとnth-childの違いってなんだっけ？」
「CSSの擬似クラスって何？」
そんな時に役に立つ実行サンプル付きの解説でした。
個人的な意見としては、nth-childの方がつづりは覚えやすいですが、nth-of-typeの方が子要素をカウントして使う擬似クラスとしては、感覚的に使いやすいのではないか？と思います。
「nth-childとnth-of-typeって、そういえばどう違うんだっけ…？」そんな時の備忘録として、ぜひご参考にご活用していただければ幸いです。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
