IDセレクタを使いこなして、特定の要素にだけスタイルを適用しよう

2024-04-03

特定の ID 下の要素のみをスタイル設定する CSS

ID セレクタ

HTML で要素に id 属性を付与し、CSS で # 記号と id 属性の値を組み合わせてセレクタを指定します。

<div id="container">
  <p>通常テキスト</p>
  <p id="special">特別なテキスト</p>
</div>

#special {
  color: red;
  font-weight: bold;
}

上記の場合、#container 要素内の #special 要素のみが赤色で太字に表示されます。

子孫セレクタ

親要素の ID と子要素のタグ名を組み合わせてセレクタを指定します。

<div id="container">
  <p>通常テキスト</p>
  <p class="special">特別なテキスト</p>
</div>

#container p.special {
  color: blue;
  text-decoration: underline;
}

特定の ID の直後に続く要素のみをスタイル設定できます。

<div id="container">
  <p>通常テキスト</p>
  <p id="special">特別なテキスト</p>
  <p>通常テキスト</p>
</div>

#special + p {
  color: green;
}

上記の場合、#special 要素の直後に続く p 要素のみが緑色で表示されます。

補足

上記以外にも、擬似クラスや nth-child セレクタなどを組み合わせて、より複雑な条件を設定することも可能です。
ID はページ内でユニークである必要があるため、同じ ID を複数の要素に付与することはできません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS サンプル</title>
  <style>
    #container {
      border: 1px solid #ccc;
      padding: 10px;
    }

    #special {
      color: red;
      font-weight: bold;
    }

    #container p.special {
      color: blue;
      text-decoration: underline;
    }

    #special + p {
      color: green;
    }
  </style>
</head>
<body>
  <div id="container">
    <p>通常テキスト</p>
    <p id="special">特別なテキスト</p>
    <p class="special">特別なテキスト</p>
    <p>通常テキスト</p>
  </div>
</body>
</html>

このコードを実行すると、以下のように表示されます。

#special 要素は赤色で太字
#special 要素の直後に続く p 要素は緑色

特定の ID 下の要素のみをスタイル設定するには、ID セレクタ、子孫セレクタ、隣接セレクタなどを組み合わせることで実現できます。

上記のサンプルコードを参考に、さまざまな条件でスタイル設定を試してみてください。

特定の ID 下の要素のみをスタイル設定するその他の方法

属性セレクタ

要素の属性値を条件にしてスタイル設定できます。

<div id="container">
  <p data-type="normal">通常テキスト</p>
  <p id="special" data-type="special">特別なテキスト</p>
</div>

#container p[data-type="special"] {
  color: orange;
}

JavaScript を使用して、特定の ID 下の要素を取得し、スタイルを動的に変更することもできます。

<div id="container">
  <p>通常テキスト</p>
  <p id="special">特別なテキスト</p>
</div>

<script>
const specialElement = document.getElementById("special");
specialElement.style.color = "purple";
</script>