〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【コピペOK!】3の倍数や最初や最後などのn番目の要素をCSSのnth-childで指定する方法

本記事は、「3の倍数など特定の要素をCSSで指定したい…」と思いつつ

UIHACK
編集長
UIHACK 編集長

・nth-childセレクタやnth-of-typeセレクタを使って要素を選択する方法がわからない
・3の倍数を使って要素をコーディングする際に、うまく動作しない場合がある
・特定の要素(最初や最後)を指定する方法を知りたい

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向け現役エンジニアが解説します。

この記事では、「前半」では「nth-childセレクタやnth-of-typeセレクタの基本的な使い方」「後半」では「特定の要素(最初や最後)をCSSで指定」する方法を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください!

CSS nth-childセレクタを使って要素を選択する方法

CSSのnth-childセレクタは、特定の位置にある要素を選択してスタイルを適用するための便利な機能です。

nth-childセレクタは、HTML要素の子要素の中から特定の位置や条件に一致する要素を選びます。例えば、リストの2番目の項目テーブルの偶数行などを簡単にスタイリングすることができます。

nth-childセレクタの基本的な使い方は、次のようになります。

リストの2番目の項目を選択する場合

【実行結果】リストの2番目の項目を選択

nth-childセレクタを使って要素を選択する方法

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5

HTML

<h2>nth-childセレクタを使って要素を選択する方法</h2>
<ul>
   <li>項目1</li>
   <li>項目2</li>
   <li>項目3</li>
   <li>項目4</li>
   <li>項目5</li>
</ul>
HTML

CSS

/* 特定の位置の要素をスタイリング */
要素:nth-child(n) {
  スタイルのプロパティ: 値;
}

/* 例:リストの2番目の項目を赤色にする場合 */
li:nth-child(2) {
  color: red;
}
CSS
プチ解説

この例では、li要素の中で2番目に位置する項目赤色になります。

nth-childセレクタではさまざまな条件を指定できます。

【実行結果】nth-childセレクタの様々な活用方法

HTML

<table>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
    </tr>
    <tr>
      <td>セル3</td>
      <td>セル4</td>
    </tr>
    <tr>
      <td>セル5</td>
      <td>セル6</td>
    </tr>
    <tr>
      <td>セル7</td>
      <td>セル8</td>
    </tr>
</table>
HTML

CSS

table {
  border: 1px #f2f2f2 solid;
}

/* 偶数行のテーブルに背景色をグレイにする */
tr:nth-child(even) {
  background-color: #f2f2f2;
}
CSS
プチ解説

このHTMLファイルでは、CSSのnth-childセレクタを使って、テーブル(table要素)の偶数行(2行目、4行目、6行目など)が背景色がグレイ (#f2f2f2) になるようにスタイルを設定しています。

このスタイルを適用することで、テーブルの偶数行がグレイ色で表示されます。

CSS 3の倍数など特定の場所を選択する方法

nth-childセレクタを使って特定の場所や条件に一致する要素を簡単に選択することができます。

特に、3の倍数2つおきの要素などをスタイリングすることが便利です。これにより、Webサイトのデザインに多様性やバリエーションを加えることができます。

3の倍数の要素を選択する方法

【実行結果】3の倍数の要素を選択する方法

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
  • 項目6
  • 項目7
  • 項目8
  • 項目9
プチ解説

このコードを使うと、リストやテーブルなどの要素の中で3の倍数にある要素が選択されます。

例えば、リストの3番目、6番目、9番目などが選択され、指定したスタイルが適用されます。

CSS nth-childとnth-of-typeの違いと適切な使い分け

CSSのnth-childnth-of-typeは、要素を特定の位置で選択するためのセレクタですが、微妙な違いがあります。nth-childは親要素内のすべての要素を位置で選択します。一方、nth-of-typeは要素のタイプに基づいて位置を選択します。

例えば、ul要素内のli要素を考えてみましょう。nth-child(2)2番目のli要素を選択しますが、nth-of-type(2)はul内のすべてのli要素の中で2番目のli要素を選択します。

nth-childの使い方と応用テクニック

nth-childを使うと、親要素内のすべての要素を位置で選択できます。例えば、2つずつ要素をスタイリングしたり、特定の位置以降の要素にスタイルを適用したりできます。

【実行結果】nth-childで2つずつの要素に灰色の背景を変える

要素1

要素2

要素3

要素4

要素5

プチ解説

2つずつの要素に灰色の背景が適用されます。

HTML

<div class="parent1">
    <p>要素1</p>
    <p>要素2</p>
    <p>要素3</p>
    <p>要素4</p>
    <p>要素5</p>
</div>
HTML

CSS

/* nth-childの例 */
.parent1 > p:nth-child(2n) {
   background-color: #f2f2f2;
}
CSS

nth-of-typeの使い方と応用テクニック

nth-of-typeは要素のタイプに基づいて位置を選択します。これは特定の要素の位置をタイプごとに選択できるため、便利です。

要素1

要素2

要素3

要素4

要素5

要素6

要素7

要素8

要素9

プチ解説

3つおきにある要素の中で最初の要素に赤色のテキストが適用されます。

CSSで最初の子要素を選択する方法と応用テクニック

CSSで最初の子要素を選択する方法と応用テクニックについて説明します。

CSSで最初の子要素を選択する方法

CSSで最初の子要素を選択するには、:first-childという擬似クラスを使います。この擬似クラスは、親要素内の最初の子要素にスタイルを適用するのに便利です。

UIHACK
編集長
UIHACK 編集長

例えば、以下のようなHTMLとCSSを考えてみましょう。

【実行結果】:first-child(親要素内の最初の子要素に適用)

  • 最初の項目
  • 2番目の項目
  • 3番目の項目
プチ解説

この例では、ul要素の中で最初の子要素である“最初の項目”テキストが赤色で太字になります。

CSSで最初の子要素を選択する擬似クラスは、Webデザインにおいて非常に便利な機能です。是非、実際のプロジェクトで試してみてください!

CSS 偶数や奇数の要素を選択するnth-childの活用

CSSのnth-childセレクタを使うと、偶数奇数の要素を簡単に選択することができます。

これは、例えばテーブルの行を交互に色分けしたり、リストの項目を交互にスタイルを変えたりするのに便利です。

UIHACK
編集長
UIHACK 編集長

以下に、偶数と奇数の行に異なる背景色を適用する例を示します。

【実行結果】偶数や奇数の要素を選択するnth-childの活用

行1のセル1 行1のセル2
行2のセル1 行2のセル2
行3のセル1 行3のセル2
行4のセル1 行4のセル2
プチ解説

この例では、偶数行(行2と行4)にはグレイの背景色が、奇数行(行1と行3)にはレッドの背景色が適用されます。

HTML

 <table>
    <tr>
      <td>行1のセル1</td>
      <td>行1のセル2</td>
    </tr>
    <tr>
      <td>行2のセル1</td>
      <td>行2のセル2</td>
    </tr>
    <tr>
      <td>行3のセル1</td>
      <td>行3のセル2</td>
    </tr>
    <tr>
      <td>行4のセル1</td>
      <td>行4のセル2</td>
    </tr>
  </table>
HTML

CSS

/* 偶数行にグレイの背景色を適用する */
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    /* 奇数行にホワイトの背景色を適用する */
    tr:nth-child(odd) {
      background-color: #ef0a0a;
    }
CSS

nth-childセレクタを活用すると、偶数や奇数だけでなく、さまざまな位置にある要素を選択することができます。

例えば、「3の倍数の要素にだけスタイルを適用する」「最初の5つの要素にだけスタイルを適用する」といった応用的なスタイリングが可能です。

初心者の方でも少しずつ試してみて、楽しく学んでくださいね。

あなたにオススメの本

【4年連続、売上第1位!】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】

読者の圧倒的な支持!シリーズ35万部突破の大ヒット!
¥2,486 (2023/08/01 15:07時点 | Amazon調べ)

nth-childセレクタを使って要素を選択する方法の結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、nth-childセレクタやnth-of-typeセレクタを使って要素を選択する方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • CSS nth-childセレクタを使って要素を選択する方法
  • nth-childセレクタを使って要素を選択する方法
  • CSS 3の倍数など特定の場所を選択する方法
  • CSS nth-childとnth-of-typeの違いと適切な使い分け
  • CSSで最初の子要素を選択する方法と応用テクニック
  • CSS 偶数や奇数の要素を選択するnth-childの活用

もう一度、最初から「CSS nth-childセレクタを使って要素を選択する方法」を読む↑

HTML・CSSでログイン画面を実装したい方は、ぜひ以下の記事もご覧ください。

特に人気のあるフェードインアニメーションを実装したい方は、ぜひ以下の記事もご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です