id セレクタの基本

    
サイトタイトル

id と class の違い

詳細度の罠

id の詳細度は 0,1,0,0。class や属性セレクタを 10 個重ねても勝てません:

/* これは id に勝てない */
.header.dark.fixed.main { background: blue; }       /* 0,0,4,0 */

/* これも勝てない */
header.fixed[role="banner"] { background: blue; }   /* 0,0,2,1 */

/* これが必要になる… */
#header { background: red; }                        /* 0,1,0,0 */

/* 上書きするには id を使うか !important */
#header.dark { background: blue; }                   /* 0,1,1,0 */
.header { background: blue !important; }             /* !important */

/* よくある悲劇: id+!important の連鎖
    元: #header { color: red; }
    改修1: #header { color: blue !important; }
    改修2: ......(打つ手なし) */

id セレクタを使うべきでない理由

1. 再利用できない — 1 ページに 1 つしか置けない
2. 詳細度が高すぎる — 後から class で上書きできない
3. 大規模化で衝突 — チームメンバ間で同じ id を付けがち
4. BEM / SMACSS / CSS Modules 等のメソドロジに合わない

原則として:

/* ✅ 推奨: class でスタイル */
.header { ... }
.header__title { ... }
.header--dark { ... }

/* ✅ id は JS / アンカー / aria 用途のみ */
#main-content { /* 中身は CSS で何も指定しない */ }

本文へスキップ


    
セクション1
    ...

JavaScript からの id 利用

// 最速: getElementById は専用最適化
const el = document.getElementById('main');

// 同等: querySelector でも可
const el2 = document.querySelector('#main');

// 一意性が壊れていると...
// HTML 内に id="main" が 2 つある場合
//   getElementById: 最初の要素を返す（順序依存）
//   querySelectorAll('#main'): 全部返るので NodeList で確認可能

// 動的生成時の id 衝突回避
function uniqueId(prefix = 'el') {
    return `${prefix}-${crypto.randomUUID()}`;
}
const id = uniqueId('modal');

ARIA 属性での id 必須ケース

アクセシビリティでは id 参照が必須の場面があります:

名前




8文字以上、英数字混在



    
確認
    
削除してよろしいですか？



メール

id が重複したときの挙動

A
B

HTML 仕様違反であり、id 重複は必ず避けるべきです。

CSS Modules / styled-components 時代の解決

モダンフロントエンドでは id 衝突回避のため、ビルド時にハッシュ化された classを生成します:

// CSS Modules
import styles from './Header.module.css';
...
// → 実際の class は "Header_header__a3f2k"

// styled-components
const Header = styled.header`
    background: #333;
    color: white;
`;
...
// → class 名は自動生成 "sc-bdVaJa pZksv"

// Tailwind CSS（ユーティリティ）
...

// CSS Layer で詳細度を管理
@layer reset, base, components, utilities;
@layer components {
    .header { ... }
}

FAQ

Q: id にハイフンや数字は使える？
A: 使える。ただし数字始まりは古い CSS で問題出る場合があるので、英字始まり推奨。

Q: 詳細度を下げて id をスタイルに使いたい
A: :where(#id) { ... } で詳細度 0 に。新しい技。

Q: id を JS と CSS で別の名前にしたい
A: 要素には id (JS 用) と class (CSS 用) を両方持たせる。