擬似クラスを覚えよう！CSSのnth-childの使い方【初心者向け】
初心者向けにCSSで書くnth-childの使い方について解説しています。nth-child()擬似クラスを実際に使用した例をもとに説明しているので、すぐ理解できるはずです。nth-of-typeとの違いも理解していきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで書くnth-childの使い方について解説をしています。
CSSを始めたばかりという人でnth-childを使う場面はなかなか出てこないかもしれませんが、デザインを整えるのに非常に便利です。リストなどをよく作成する際はぜひチェックしておきましょう。
そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。
なお本記事は、TechAcademyのWebデザインオンライン講座のカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！！よく表とかで、背景の色を2色で交互にしてたりしますよね。あれってどうやったらいいんですか〜？
そんなときはnth-childを使ってみよう。
nth-childというのはなんですか？
親要素から見て何番目の子要素だけにスタイルを適用、というように指定ができる疑似クラスだよ。まずは基本の書き方を見てみよう。
nth-childとは
nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させることができます。
多数の項目がある表で、交互に背景色を設定し見やすくしたい時などに役立ちます。
nth-childの書き方
nth-childは以下のように記述します。
要素:nth-child(値){スタイルの内容}
値には数字、2n+1などの式の他にeven(偶数)などを設定することができます。
例）
偶数にのみ適用する場合：2nあるいはeven
奇数にのみ適用する場合：2n+1あるいはodd
n番目に適用する場合：適用したい項目の順番の数値
n番目以降すべてに適用する場合：n+適用を開始する項目の数値
指定する要素は、実際にスタイルを適用する要素でいいんですか？
そうだね。「指定した要素が、それの親要素から見て何番目か」という形になるんだ。
なるほど、頭に入れておきます。
次は実際の例で見てみよう。今回は背景の色を変えて画面で確認するよ。
実際にnth-childを書いてみよう
以下のhtmlファイルにnth-childを適用します。
(※htmlとcssファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<ul type=”square”>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
<li>リスト項目5</li>
<li>リスト項目6</li>
</ul>
</body>
</html>
nth-childを使用し、この中から特定の順番の項目だけに背景色が#add8e6になるように設定を行います。
偶数に適用する場合
nth-childの値にevenと入力します。(2nでも結果は同じになります)
CSS
ul li:nth-child(even){background-color:#add8e6; }
画面ではこのように表示されます。リスト内の偶数の要素にだけ背景色の変更が適用されています。
奇数に適用する場合
nth-childの値にoddと入力します。(2n+1でも結果は同じになります)
CSS
ul li:nth-child(odd){background-color:#add8e6; }
画面ではこのように表示されます。奇数の要素にスタイルが適用されます。
n番目の要素にだけ適用する場合
nth-childの値に適用したい項目の数値を入力します。ここでは3としています。
CSS
ul li:nth-child(3){background-color:#add8e6; }
画面ではこのように表示されます。指定された3番目の項目だけにスタイルが適用されています。
n番目から後すべてに適用する場合
nth-childの値にn+適用を開始したい項目の数値を入力します。ここではn+4としています。
CSS
ul li:nth-child(n+4){background-color:#add8e6; }
画面ではこのように表示されます。4番目以降のすべての項目にスタイルが適用されます。
以上、CSSで書くnth-childの使い方について説明しました。
リスト項目に一つ一つスタイルを当てていては時間だけが過ぎていってしまいます。nth-childのような便利なCSSを覚えてぜひ実践でも使えるようにしていきましょう。
nth-childの指定例をいくつか見てみたよ。
2色交互とかだけじゃなくて、色々な設定ができるんですね。
擬似クラスを使うとこのように、要素の中でさらに特定の条件を指定することができるんだ。うまく活用してサイトを見やすくしてみよう。
分かりました。ありがとうございます！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
