過去バージョン

この記事の要点

ID セレクタは #myId { ... } の形式で、HTML 要素の id 属性を指す Specificity（詳細度）が 100 と高く、class（10）や要素セレクタ（1）より優先される 同 1 ページに同じ id は 1 つだけ。複数あると JavaScript の getElementById も最初の 1 つしか取れない 主な用途: JavaScript フック / アンカーリンク（<a href="#section">）/ label の for 属性 近年は CSS Modules / BEM の普及で、見た目用には class、JS や a タグ用には id と役割分離が一般化

ID セレクタの基本

CSS で要素を選択する 3 大セレクタ（要素・class・ID）のうち、ID セレクタは #（シャープ）から始まります:

<!-- HTML -->
<h1 id="page-title">ようこそ</h1>
<div id="main-content">本文...</div>
<button id="submit-btn">送信</button>

/* CSS */
#page-title {
    color: #333;
    font-size: 2em;
}

#main-content {
    max-width: 800px;
    margin: 0 auto;
}

#submit-btn {
    background: #1a73e8;
    color: white;
    padding: 10px 20px;
}

class セレクタとの違い

項目	ID セレクタ #id	class セレクタ .class
同 1 ページに何個	1 つだけ	何個でも
1 要素に何個付くか	1 つだけ	複数可（class="a b c"）
Specificity（詳細度）	100	10
主な用途	JS フック / アンカー / label for	見た目スタイル / 再利用
JS API	getElementById() 高速	getElementsByClassName() / querySelectorAll('.x')

Specificity（詳細度）と優先順位

CSS は同じ要素に複数のルールが当たるとき、Specificity が高い方が勝つ仕様です。ID セレクタは class より 10 倍強い扱いです:

/* Specificity 計算式: (a, b, c, d)
 *   a = インラインスタイル (style="...")
 *   b = ID セレクタの数
 *   c = class / 属性 / 擬似クラスの数
 *   d = 要素 / 擬似要素の数
 */

* { }                         /* 0,0,0,0 */
p { }                         /* 0,0,0,1 */
p.warning { }                 /* 0,0,1,1 */
#page-title { }               /* 0,1,0,0 */
#page-title.large { }         /* 0,1,1,0 */
style="color: red"            /* 1,0,0,0 */
!important                    /* 全てを上書き */

<!-- 例: どの色になる？ -->
<p id="title" class="red">Hello</p>

<style>
    p.red { color: red; }        /* 0,0,1,1 = 11 */
    #title { color: blue; }      /* 0,1,0,0 = 100 ← 勝つ */
</style>

<!-- → 青色になる -->

JavaScript からのアクセス

ID は高速・確実に DOM を取得できる:

// 最も高速・直接的
const title = document.getElementById('page-title');

// querySelector で # 記法
const title2 = document.querySelector('#page-title');

// HTML5 以降: window.<id> でグローバル参照可（非推奨）
console.log(window.pageTitle);  // <h1 id="page-title">

// id にハイフンが入っていても OK（変数名と違ってよい）
const el = document.getElementById('my-section');

注意: HTML5 では id は 任意の文字列でよく、CSS で使うときだけハイフン名がエスケープが要る場合があります。

ID 命名のルール

ルール	HTML5	HTML4 / XHTML
空文字 NG	○ 不可	○ 不可
数字始まり	OK	NG（英字必須）
日本語	OK（実用は微妙）	NG
ハイフン・アンダースコア	OK	OK
スペース	NG（区切り文字扱い）	NG
大文字小文字	区別される	区別される

命名は kebab-case（main-content）または camelCase（mainContent）が一般的。チーム内で統一しましょう。

アンカーリンク（ページ内ジャンプ）

ID の代表的な活用例。<a href="#id"> で当該要素までスクロール:

<!-- 目次 -->
<nav>
  <a href="#intro">はじめに</a>
  <a href="#install">インストール</a>
  <a href="#usage">使い方</a>
</nav>

<h2 id="intro">はじめに</h2>
<p>...</p>

<h2 id="install">インストール</h2>
<p>...</p>

<h2 id="usage">使い方</h2>
<p>...</p>

<!-- ページ先頭へ -->
<a href="#top">トップへ戻る</a>

/* 固定ヘッダがある場合、id へ飛んだ位置が隠れないように */
html {
    scroll-behavior: smooth;
}

h2 {
    scroll-margin-top: 80px;  /* 固定ヘッダの高さ分 */
}

label の for 属性

フォームの label と input を紐付けるのにも ID を使います:

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

<!-- ラベルをクリックすると input がフォーカスされる -->
<!-- アクセシビリティ的にも推奨 -->

ARIA との関係

WAI-ARIA 属性は ID を参照することが多い:

<!-- aria-describedby で説明文を紐付け -->
<input type="password" aria-describedby="pwd-help">
<p id="pwd-help">8 文字以上、英数字混在</p>

<!-- aria-labelledby で複数要素をラベル化 -->
<div role="dialog" aria-labelledby="dlg-title">
  <h2 id="dlg-title">確認</h2>
  ...
</div>

<!-- aria-controls -->
<button aria-controls="menu" aria-expanded="false">メニュー</button>
<ul id="menu" hidden>...</ul>

同 1 ページに同じ id を複数置くと

• HTML 仕様違反（バリデータでエラー）
• getElementById() は最初の 1 つしか返さない
• アンカー #id も最初の 1 つにスクロール
• CSS は全部に当たる（動くが規約違反）
• スクリーンリーダーが混乱する

id と class、どちらを使うべきか

用途	推奨
見た目スタイル（再利用したい）	class
ボタンの色を統一	class
ページ内ジャンプ先	id
label と input の紐付け	id
JavaScript で特定の 1 要素を操作	id or data-* 属性
同じスタイルを複数要素に	class
ARIA で参照したい	id 必須

近年の SPA / コンポーネント設計では、見た目は class、JS フックは data-testid や data-action、a タグや ARIA 用に id、と役割分離する設計が一般的です。

CSS Modules / styled-components 時代の ID

React / Vue で CSS Modules や styled-components を使うと、class 名が自動ハッシュ化されます。ID はハッシュ化されないので、ページ内アンカーや label/for で活用できます:

// CSS Modules
import styles from './Form.module.css';

function Form() {
  return (
    <>
      <label htmlFor="user-email">メール</label>
      <input id="user-email" className={styles.input} />
    </>
  );
}
// → <input id="user-email" class="Form_input__abc123">
// id は素のまま、class はハッシュ化

FAQ

Q: ID セレクタは使わない方がいい？
A: 「見た目用途で使わない」のが現代のベストプラクティス。Specificity が高すぎて上書きが大変です。JS フック / アンカー / label 専用と割り切ると綺麗になります。

Q: id を数字始まりにできる？
A: HTML5 では可能。ただし CSS で #1title と書くとエラーになるので、#\31 title とエスケープが要ります。実用上は英字始まりが無難。

Q: CSS で div#title と書く意味は？
A: id は元々一意なので #title だけで十分。要素名を付けると Specificity が 0,1,0,1 に上がり、後の上書きが余計困難になります。