From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/id_selectors/index.html | 85 ++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/ja/web/css/id_selectors/index.html (limited to 'files/ja/web/css/id_selectors') diff --git a/files/ja/web/css/id_selectors/index.html b/files/ja/web/css/id_selectors/index.html new file mode 100644 index 0000000000..7e61a62063 --- /dev/null +++ b/files/ja/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: ID セレクター +slug: Web/CSS/ID_selectors +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

CSS の ID セレクター (ID selector) は、 {{htmlattrxref("id")}} 属性の値に基づいて要素と一致します。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければなりません。

+ +
/* id="demo" のついた要素 */
+#demo {
+  border: red 2px solid;
+}
+ +

構文

+ +
#id_value { スタイルプロパティ }
+ +

なお、これは次の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です (ただし、詳細度は異なります)。

+ +
[id=id_value] { スタイルプロパティ }
+ +

+ +

CSS

+ +
#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">これは特別な ID がついています!</div>
+<div>これは単なる普通の div です。</div>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", '100%', 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.id")}}

-- cgit v1.2.3-54-g00ecf