[PR]テレビ番組表
今夜の番組チェック

 

IDセレクタの設定

IDセレクタをHTMLに指定

Page Top ▲

ID as Selector

セレクタに、ID名を付けてスタイルを分けます。
機能的には、クラスセレクタと同じですが、クラスセレクタの指定より優先されますから、特定の個所の指定に向いています。
また、セレクタを選択して動作させるようなJava Scriptの場合、セレクタはIDセレクタでクラスセレクタは認識できません。

 

IDセレクタの設定

#ID名でIDセレクタとして利用できます。
IDセレクタは、クラスセレクタのようにタグをセレクタとして使用できませんから、全てのタグに使用できます。

#ID name { property : values ; property : values ; ・・・; }

 

IDセレクタをHTMLに指定

クラスセレクタの指定は、HTML本文の指定するタグにID属性を加え、ID名を記入します。
サンプルでは、ID名がredで文字色を赤に、ID名がitalicでフォントスタイルをイタリックに指定しています。
<P>タグのbodyクラスは、文字の色は黒でフォントスタイルはノーマルですが、ID名redを指定した行は赤になります。また、ID名をitalicした部分は、イタリック体になります。
このように、IDセレクタは、クラスセレクタより優先されて指定されます。

<tag id=”#id name”>

<style type="text/css">
<!--
p.body  { font-size: 16.0pt; font-family: Arial, Helvetica; }
#red    { color: red; }
#italic { font-style: italic; }
-->
</style>

 

<p class="body">Class Selector Name Body.</p>
<p id="red" class="body">Class Selector Name Body. ID Selector Name Red.</p>
<p class="body">Class Selector Name Body.<span id="italic">ID Selector Italic.</span></p>

sample