idセレクタ

TOPページに戻る > CSS

スポンサード リンク

idセレクタ

classセレクタの他にidセレクタでもスタイルを指定できます
classはドットでしたがidは#になります
id名は任意のキーワードを指定できます
特徴はページ内で同じID名は一つしか、使うことができません
※違うページなら同じID名を使うことができます(hoge.html hogege.htmlでは同じid名が使える)
特定の箇所のスタイルを指定する時に便利です

使い方

#id名 { プロパティ : 値; }

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

この場合、他のhtml要素にredとゆうid名をつければその要素のスタイルが変更できます

#red { プロパティ : 値; }

p要素にredとゆうクラス名を付けた場合の使い方

p#red { プロパティ : 値; }

ID名に使える文字は半角英数字とハイフン「- 」、アンダーバー「_ 」などです
良い例、
#sanple5
#sample_1
#sample-2

※ハイフンとアンダーバーは最初と最後には使えません
※数字は最初につけることができません
できない例、
#5sample
#-sample
#_sanple

実際の指定方法

cssファイル (文字の色を赤に変更)

#red { color: red; }

html部分 (redのidの場所を指定)

<p id="red">idセレクタ</p>

実際の表示

idセレクタ


優先順位

優先順位で一番ポイントが高いのがidクラスです。足し算して一番ポイントが高いセレクタのスタイルが適用されます

id > class > 要素の指定のみ > 全称セレクタ(*)


id 100ポイント
class、擬似クラス 10ポイント
要素のみ(要素2個だと2ポイント) 1ポイント
全称セレクタ 0ポイント
親要素からの継承 0ポイント

p#red { color: red; }
p { color: blue; }
上の場合は、最初の行が要素とidなので1+100=101ポイント
2行目が、要素1つのみなので1ポイントです
最初の行のほうがポイントが高いので赤い色の文字になります

同じclass名で指定した場合どうなるか?
p.red { color: red; }
p.red { color: blue; }

後に出てきたスタイルが優先されます。この場合は下のblueが優先されるので青い文字になります




(C)2012 ホームページ作成無料