トップページの中の セレクタの中の IDセレクタ (E#myid)

IDセレクタ (E#myid)

  • 最終更新:2009年6月25日 02:05

CSS1で定義されたIDセレクタは、(X)HTML文書内で唯一の要素に適用させるセレクタで、シャープ(#)とその直後に続くID名から成り立ち、ID名と(X)HTMLのid属性が一致した場合に適用されます。
書き方としてはクラスセレクタとほぼ同じで、扱える文字もクラスセレクタと同じになります。
扱える文字に関しては「識別子で扱える文字」を参照してください。

IDセレクタとクラスセレクタは、書き方こそ似ていますが扱いとしては大きく異なります。
まず、同一の文書内においてid属性が重複してはいけません。IDという響きからも、何かのウェブサービスで登録する場合IDの重複が出来ないのと同じで、必ず同じid属性は文書内で一つになります。
そのため、IDセレクタとして使っていなくともプログラムなどの関係でid属性を使っている場合は注意が必要です。
また、id属性はアンカーリンクの終点としても使うため、ここでも重複しないようにします。
個別性に関しても、クラスセレクタが「10」に対してIDセレクタは「100」になります。そのため、IDセレクタで指定したスタイルは上書きされにくくなります。

IDセレクタの使いどころとしては、主にヘッダーやフッターなどの文書内で唯一といえる要素に適用させる事が多いです。
特にメインコンテンツ内でIDセレクタを使うと、サイトの仕様に変更が有った場合など思わぬところで重複してしまう可能性も有るので注意しましょう。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

IDセレクタのサンプル

#contents {
  float: left;
  width: 860px;
  margin: 0;
}

#contents #main {
  float: left;
  width: 540px;
  padding: 10px;
}

#contents #sub {
  float: right;
  width: 280px;
  padding: 10px;
}
<div id="contents">

<div id="main">
</div>

<div id="sub">
</div>

<!-- / #contents --></div>

サンプルは基本的な2カラムレイアウトのスタイルを適用させています。
IDセレクタは前述したように同一の文書内でid属性が重複してはいけないため、レイアウトを組むために使用する事が多くなります。IDセレクタとクラスセレクタの使い分けは難しい部分なので、慣れないうちは大枠のレイアウトを組む場合のみIDセレクタを使うのがいいと思います。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ