【IDセレクタ】id名をつけた要素に適用する

idセレクタでは、id属性で任意の名前をつけた要素に対してスタイルを適用させる事ができます。 idセレクタとは、シャープ「#」に続く任意のid名をセレクタとするものの事をいい、id属性の値に同じid名が指定されている要素に対してスタイルを適用することが可能です。

また「#id名」は「∗#id名」を省略したもので、そのid名が指定されている全ての要素に対して適用されます。 先頭に要素名を指定し「要素名#id」というようにすると、その指定した要素(id名がついている要素)でのみ適用されます。

ただしid属性は唯一のものとして特定するための識別子です。 ですので一つのHTML文書内で同じid名を重複して使用する事はできませんので注意して下さい。

※1つのHTML文書内で複数の要素に同じid名を指定する事はできませんが、id属性自体は同じ名前でなければ何回でも使用可能です。(cssではなくhtml)

書式

  • #ID名 {プロパティ名:値;} ……… id名を付けた要素に適用させる

使用した時の例

#sample1 {border: solid 1px red;}
h4#sample2 {text-decoration: underline;}
 
<div id="sample1">
<h4>明日の天気</h4>
<p>2017年1月17日の天気はくもりです。</p>
<p>19日にかけて徐々に気温が上がってきます。</p>
</div>

<h4 id="sample2">今日の天気</h4>
<p>2017年1月16日の天気は雪です。</p>
<p>日本海側を中心に平野部でも大雪となってます。</p>

ブラウザ上の表示例

明日の天気

2017年1月17日の天気はくもりです。

19日にかけて徐々に気温が上がってきます。

今日の天気

2017年1月16日の天気は雪です。

日本海側を中心に平野部でも大雪となってます。

対応ブラウザなどのデータ

適用対象 id名をつけた要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報