擬似クラスを覚えよう!CSSのnth-childの使い方【初心者向け】

初心者向けにCSSで書くnth-childの使い方について解説しています。nth-child()擬似クラスを実際に使用した例をもとに説明しているので、すぐ理解できるはずです。nth-of-typeとの違いも理解していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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+適用を開始する項目の数値

 

大石ゆかり

指定する要素は、実際にスタイルを適用する要素でいいんですか?

田島悠介

そうだね。「指定した要素が、それの親要素から見て何番目か」という形になるんだ。

大石ゆかり

なるほど、頭に入れておきます。

田島悠介

次は実際の例で見てみよう。今回は背景の色を変えて画面で確認するよ。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に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; }

画面ではこのように表示されます。リスト内の偶数の要素にだけ背景色の変更が適用されています。

nthc_p_1

 

奇数に適用する場合

nth-childの値にoddと入力します。(2n+1でも結果は同じになります)

CSS

ul li:nth-child(odd){background-color:#add8e6; }

画面ではこのように表示されます。奇数の要素にスタイルが適用されます。

nthc_p_2

 

n番目の要素にだけ適用する場合

nth-childの値に適用したい項目の数値を入力します。ここでは3としています。

CSS

ul li:nth-child(3){background-color:#add8e6; }

画面ではこのように表示されます。指定された3番目の項目だけにスタイルが適用されています。

nthc_p_3

 

n番目から後すべてに適用する場合

nth-childの値にn+適用を開始したい項目の数値を入力します。ここではn+4としています。

CSS

ul li:nth-child(n+4){background-color:#add8e6; }

画面ではこのように表示されます。4番目以降のすべての項目にスタイルが適用されます。

nthc_p_4

 

以上、CSSで書くnth-childの使い方について説明しました。

リスト項目に一つ一つスタイルを当てていては時間だけが過ぎていってしまいます。nth-childのような便利なCSSを覚えてぜひ実践でも使えるようにしていきましょう。

 

田島悠介

nth-childの指定例をいくつか見てみたよ。

大石ゆかり

2色交互とかだけじゃなくて、色々な設定ができるんですね。

田島悠介

擬似クラスを使うとこのように、要素の中でさらに特定の条件を指定することができるんだ。うまく活用してサイトを見やすくしてみよう。

大石ゆかり

分かりました。ありがとうございます!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。