CSS-IDセレクタ

IDセレクタとは

IDセレクタは、「id属性」でID（固有の識別名）を付加した要素にだけスタイルを適用さします。

「id属性」は「class属性」とは異なり、同一文書内で重複して指定することができません。

idセレクタを使用することで、文書内の場所を一意に特定してスタイルを適用することができます。

IDセレクタの記述

ID名は「#」に続けて記述します。

クラス名には以下の禁則事項があります。

大文字と小文字の区別があります。
使用できる文字は、半角の英数字、ハイフン、アンダーバーです。
アンダーバーをクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。
先頭文字はアルファベットとする必要があります。先頭文字に数字や記号は使用できません。

ID名のみ指定する

ID指定されたdiv要素内の全要素にスタイルが適用されます。


#sample1 { color: blue; }

<div id="sample1">
 <h2>ID指定あり</h2>
  <p>文字は<strong>青色</strong>です。</p>
</div>
<h2>ID指定なし</h2>
<p>文字は<strong>デフォルト指定</strong>です。</p>

要素名とID名を指定する


h1#sample2 { color: red; }

<h1 id="sample2">この文字色は赤になります</h1>

子孫セレクタ形式を指定する

ID指定されたdiv要素内の指定要素にのみスタイルが適用されます。

指定以外の要素にはスタイルは適用されません。