JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのnth-childでHTML要素に奇数・偶数のスタイルを追加する方法

Webページを作っていると、リストやカードなど複数の要素に対して「奇数番目」「偶数番目」で異なるスタイルを適用したい場面がよくあります。そのようなときは、CSSの擬似クラスである nth-child(odd) と nth-child(even) を使えば、要素に一つずつクラスを手動で追加しなくても、簡単にスタイルを切り替えることができます。

CSSのnth-childを使った基本例

以下のコードでは、subjectName クラスを持つ要素に対して、奇数番目の要素は青色、偶数番目の要素は紫色を自動的に適用しています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<section class="subjects">
<article class="subjectName">MongoDB</article>
<article class="subjectName">JavaScript</article>
<article class="subjectName">Java</article>
<article class="subjectName">MySQL</article>
</section>
<style>
    .subjectName:nth-child(odd) {
        color: blue;
    }
    .subjectName:nth-child(even) {
        color: purple;
    }
</style>
</body>
</html>

実行方法

上記のプログラムを実行するには、ファイル名を index.html として保存し、VS Codeエディタ上でファイルを右クリックして「Open with Live Server」を選択してください。ブラウザでページが開き、奇数・偶数ごとに色分けされた表示を確認できます。

出力結果

CSSのnth-childでHTML要素に奇数・偶数のスタイルを追加する方法

JavaScriptで動的にクラスを追加する方法

CSSだけでも十分ですが、JavaScriptを使って奇数・偶数ごとに実際のクラスを付与したい場合は、querySelectorAll で要素を取得し、インデックスを判定しながらクラスを追加します。

const subjects = document.querySelectorAll('.subjectName');

subjects.forEach((element, index) => {
  if ((index + 1) % 2 === 1) {
    element.classList.add('odd');
  } else {
    element.classList.add('even');
  }
});

このコードでは、1番目・3番目といった奇数位置の要素に odd クラス、2番目・4番目といった偶数位置の要素に even クラスが追加されます。あとは以下のようにCSSを定義すれば、nth-childを使わずに同じ見た目を実現できます。

.subjectName.odd {
  color: blue;
}
.subjectName.even {
  color: purple;
}

jQueryを使う場合

jQueryを読み込んでいる場合は、より短く記述できます。ただしjQueryの :odd / :even はゼロ始まりのインデックス基準である点に注意してください。

$('.subjectName').each(function (index) {
  if (index % 2 === 0) {
    $(this).addClass('odd');
  } else {
    $(this).addClass('even');
  }
});

まとめ

単純な見た目の交互変更ならCSSの nth-child(odd) / nth-child(even) が最もシンプルでおすすめです。一方、条件に応じて柔軟に処理したい場合や、後からクラスを操作したい場合は、JavaScriptでクラスを追加する方法が便利です。用途に応じて使い分けましょう。

  1. JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

    要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。 実装例（サンプルコード） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

  2. JavaScriptのみで各li要素に個別のクラス名を追加する方法

    JavaScriptでli要素にクラスを追加するには、forEach()とclassList.add()を組み合わせて使用します。jQueryなどのライブラリに頼らず、純粋なJavaScript（バニラJS）だけで各要素に個別のクラスを付与できるのがポイントです。基本的な考え方querySelectorAll()で対象の要素をすべて取得し、forEach()で1つずつループ処理を行います。ループのインデックス番号（i）を条件分岐に使うことで、特定の要素だけに異なるクラスを追加することも可能です。サンプルコード以下がそのコードです −<!DOCTYPE html> <