IDセレクタ【ID selector】
概要

Webページの見栄えを記述するCSS(Cascading Style Sheet)では「セレクタ {スタイル}」という記法を基本とし、セレクタで指定した要素にスタイルを適用する。IDセレクタはその一つで、指定した値がid属性と一致する要素を選択する。
例えば、「#page-title」と記述すると、HTML要素中の「id="page-title"」が設定された要素が選択される。セレクタはカンマで区切って複数指定することもでき、「#title, #subtitle {スタイル}」のように記述すると、それぞれのIDを持つ要素に同じスタイルが適用される。
id属性の値はページ内で重複しないことが前提であるため、IDセレクタは原則として一つのページにつき一つの要素だけを対象とする。同じスタイルを複数の要素に適用したい場合は、タグ自体を対象とする「要素型セレクタ」(type selector)や、複数の要素に指定してもよいclass属性を対象とする「クラスセレクタ」(class selector)が用いられる。
CSSには複数のセレクタが定義されているが、それぞれ「詳細度」(specificity)と呼ばれる優先順位が異なる。IDセレクタはクラスセレクタや要素型セレクタより高い詳細度を持ち、同一要素に複数のスタイル指定が競合した場合、IDセレクタによる指定が優先される。この性質はスタイルの適用結果に直接影響するため、CSS設計においては考慮が必要である。
なお、HTML要素のIDはCSSによるスタイル指定のほか、JavaScriptから要素を操作する際の識別子としても利用される。document.getElementById() などのメソッドで特定の要素を取得する際にID値が参照される。さらに、URLの末尾に「#ID名」を付加することで、ページ内の特定箇所へ直接移動するページ内リンクの参照先としても使われる。