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/_colon_empty/index.html | 116 +++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/ja/web/css/_colon_empty/index.html (limited to 'files/ja/web/css/_colon_empty') diff --git a/files/ja/web/css/_colon_empty/index.html b/files/ja/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..6dbc6232af --- /dev/null +++ b/files/ja/web/css/_colon_empty/index.html @@ -0,0 +1,116 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Layout + - NeedsUpdate + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{CSSRef}}
+ +

:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の {{cssxref("content")}} は要素が空であるかどうかの判断には影響しません。

+ +
+

注: {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 :empty 擬似クラスは {{CSSxRef(":-moz-only-whitespace")}} のような動作に変更されましたが、現在これに対応しているブラウザーはありません。

+
+ +
/* 内容を含まない <div> 要素を選択 */
+div:empty {
+  background: lime;
+}
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<div class="box"><!-- I will be lime. --></div>
+<div class="box">I will be pink.</div>
+<div class="box">
+	<!-- I will be pink in older browsers because of the whitespace around this comment. -->
+</div>
+<div class="box">
+	<p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
+</div>
+
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", 300, 80)}}

+ +

アクセシビリティの考慮

+ +

読み上げソフトのような支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である accessibility tree で使用されます。

+ +

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS4 Selectors")}}{{CSSxRef(":-moz-only-whitespace")}} のような動作に変更
{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS3 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf