CSSセレクタ：子孫セレクタ、隣接兄弟セレクタ、nth-child()、:not()

2024-04-02

CSSで複数のクラスにスタイルを適用する方法

クラス名をスペースで区切る

最も簡単な方法は、クラス名をスペースで区切ってセレクタに指定する方法です。例えば、class="button primary" という要素にスタイルを適用したい場合は、以下のように記述します。

.button.primary {
  /* スタイルプロパティ */
}

この方法では、複数のクラスを持つ要素にスタイルを適用できます。

子孫セレクタを使う

要素の子孫要素にスタイルを適用したい場合は、子孫セレクタを使うことができます。例えば、class="container" 要素内の class="button" 要素にスタイルを適用したい場合は、以下のように記述します。

.container .button {
  /* スタイルプロパティ */
}

隣接兄弟セレクタを使う

.button + .icon {
  /* スタイルプロパティ */
}

nth-child()を使う

要素の子要素のうち、特定の位置にある要素にスタイルを適用したい場合は、nth-child() を使うことができます。例えば、class="item" 要素の子要素のうち、2番目の要素にスタイルを適用したい場合は、以下のように記述します。

.item:nth-child(2) {
  /* スタイルプロパティ */
}

:not()を使う

.button:not(.primary) {
  /* スタイルプロパティ */
}

これらの方法を組み合わせることで、複数のクラスに複雑なスタイルを適用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    /* 1. クラス名をスペースで区切る */
    .button.primary {
      background-color: #0000ff;
      color: #ffffff;
    }

    /* 2. 子孫セレクタを使う */
    .container .button {
      margin: 10px;
    }

    /* 3. 隣接兄弟セレクタを使う */
    .button + .icon {
      color: #ff0000;
    }

    /* 4. nth-child()を使う */
    .item:nth-child(2) {
      font-weight: bold;
    }

    /* 5. :not()を使う */
    .button:not(.primary) {
      background-color: #ffffff;
      color: #000000;
    }
  </style>
</head>
<body>
  <h1>サンプル</h1>
  <p>
    <button class="button primary">ボタン</button>
  </p>
  <div class="container">
    <p>
      <button class="button">ボタン</button>
    </p>
  </div>
  <p>
    <button class="button">ボタン</button>
    <span class="icon">!</span>
  </p>
  <ul>
    <li class="item">項目1</li>
    <li class="item">項目2</li>
    <li class="item">項目3</li>
  </ul>
  <p>
    <button class="button">ボタン</button>
    <button class="button primary">ボタン</button>
  </p>
</body>
</html>

上記コードをブラウザで開くと、各方法でスタイルが適用されていることを確認できます。

複数のクラスにスタイルを適用するその他の方法

Sass/SCSS は、CSS をより効率的に記述するための拡張言語です。Sass/SCSS を使うと、ネストや変数、ミックスインなどの機能を使って、コードを簡潔に記述することができます。

例えば、以下のように記述することで、button 要素と primary 要素に共通するスタイルを定義できます。

@mixin button-style {
  background-color: #0000ff;
  color: #ffffff;
}

.button {
  @include button-style;
}

.primary {
  @include button-style;
}

この方法では、コードを重複させることなく、複数のクラスに共通するスタイルを定義できます。

CSSフレームワークを使う

Bootstrap や Materialize などの CSS フレームワークは、あらかじめ用意されたスタイルシートとコンポーネントを提供します。これらのフレームワークを使うと、コードを記述することなく、簡単にスタイルを適用することができます。

例えば、Bootstrap を使うと、以下のように記述することで、btn クラスと btn-primary クラスを持つ要素にスタイルを適用できます。

<button class="btn btn-primary">ボタン</button>

この方法では、コードを記述することなく、簡単にスタイルを適用することができます。

JavaScript を使って、動的にスタイルを適用することもできます。例えば、以下のようなコードを使って、button 要素をクリックした時に primary クラスを追加することができます。

<button id="button">ボタン</button>

<script>
const button = document.getElementById("button");

button.addEventListener("click", () => {
  button.classList.add("primary");
});
</script>