スポンサード リンク
idセレクタ
classセレクタの他にidセレクタでもスタイルを指定できます
classはドットでしたがidは#になります
id名は任意のキーワードを指定できます
特徴はページ内で同じID名は一つしか、使うことができません
※違うページなら同じID名を使うことができます(hoge.html hogege.htmlでは同じid名が使える)
特定の箇所のスタイルを指定する時に便利です
使い方
#id名 { プロパティ : 値; }
対応ブラウザ |
この場合、他の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ポイント
p.red { color: red; } p.red { color: blue; }
後に出てきたスタイルが優先されます。この場合は下のblueが優先されるので青い文字になります