このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

IDセレクタ

記事Jun. 28th,2021
スタイルの適用対象を要素のID名で選択するIDセレクタ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

IDセレクタ

IDセレクタ(ID selectors)”はスタイルを適用する対象を要素のID名によって選択するためのセレクタです。

HTMLではID名は要素のid”属性の値によって指定されます。

IDセレクタは番号記号(U+0023、“#”)に続いて記述されたID名です。

#〚ID名〛 { ... }
<〚要素名〛 id="〚ID名〛">

ID名は有効なCSS識別子である必要があり、以下の決まりを満たさなければなりません。

  • 英字(“a”~“z”と“A”~“Z”)、数字(“0”~“9”)、ダッシュ(U+002D、“-”)、アンダースコア(U+005F、“_”)、非ASCII文字(U+0080以降)、エスケープ文字の組み合わせです。
  • 1文字目が数字であってはいけません。
  • 1文字目がダッシュである場合は2文字目は数字であってはいけません。
  • 引用符(“"”もしくは“'”)で囲ってはいけません。

ID名は要素に与えられた固有の識別子であり、同じ文書内で複数の要素が同じID名を持つことはできません。また、クラス名とは異なり、一つの要素にid”属性で複数のID名をつけることはできません。

IDセレクタは英字の大文字と小文字が区別されます。ただし、文書が互換モードでレンダリングされる場合は大文字と小文字が区別されません。

使用例

h1#red {
background-color: #d396a6; /**/
font-weight: bold;
}

h1#purple {
background-color: #be96d3; /**/
font-style: italic;
}

h1#blue {
background-color: #27b6d3; /**/
text-decoration: underline wavy;
}

h1#green {
background-color: #96d3c1; /**/
text-shadow: 5px 5px 3px;
}
<h1 id="red"></h1>
<p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>

<h1 id="purple"></h1>
<p>
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>

<h1 id="blue"></h1>
<p>
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>

<h1 id="green"></h1>
<p>
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
#ID
定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク