CSSのIDセレクターとは？基本構文と使い方を実例付きで解説

CSS IDセレクターとは

CSSのIDセレクターは、ページ内で一意のid属性を持つHTML要素を対象に、スタイルを適用するためのセレクターです。特定の1つの要素だけを確実に装飾したい場合に活用されます。

IDセレクターの基本構文

#id-name {
    property-name: value;
}

対応するHTML側では、同じ名前のidを属性値として指定します。

<div id="id-name"></div>

このように記述することで、CSSで#id-nameに定義したスタイルプロパティがすべて、その<div>要素へ適用されます。

ID名の前につくハッシュ記号（#）はCSS特有の構文です。HTML側でid属性として指定するときには#を付けない点に注意しましょう。

実践例：ボタンの見た目をカスタマイズする

それでは、ここまで学んだ内容を実際の例で確認してみましょう。まずは、ブラウザのユーザーエージェントスタイルシートからデフォルトのスタイルを継承している、ごく普通のHTMLの<button>要素です。

<button>Button</button>

デフォルトの見た目は以下のようになります。

少し味気ないですね。

そこで、#my-buttonというIDを作成し、デフォルトのボタンスタイルを上書きしてみましょう。

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

続いて、このIDをボタン要素のid属性として追加します。

<button id="my-button">Button</button>

これだけで、角丸で鮮やかな赤色のオリジナルボタンが完成します。

IDセレクターとクラスセレクターの違い

IDセレクターに関して最も重要なポイントは、CSSのクラスセレクターと異なり、IDは1つのページ内で1つの要素にしか適用できないという点です。同じID名を複数の要素に付けることは避けるべきであり、これはHTMLの仕様上も正しくありません。

そのため、IDはクラスに比べて柔軟性こそ低いものの、「確実にこの要素だけにスタイルを当てたい」という場面では挙動が予測しやすく、信頼性の高い選択肢となります。

経験則として、ヘッダー、フッター、ナビゲーションバーのように、ページ内に1回しか登場しない単一の要素に対してのみIDを使うのがおすすめです。繰り返し使う要素には、クラスセレクターを選びましょう。