From 0c68616aa46f09d03108f47b71490a4a87517005 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 26 Oct 2021 22:33:59 +0900 Subject: :focus 系の擬似クラスを更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_focus-within/index.html | 97 ------------------------- files/ja/web/css/_colon_focus-within/index.md | 97 +++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 97 deletions(-) delete mode 100644 files/ja/web/css/_colon_focus-within/index.html create mode 100644 files/ja/web/css/_colon_focus-within/index.md (limited to 'files/ja/web/css/_colon_focus-within') diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html deleted file mode 100644 index c3c4b07970..0000000000 --- a/files/ja/web/css/_colon_focus-within/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ':focus-within' -slug: 'Web/CSS/:focus-within' -tags: - - ':focus' - - ':focus-within' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus-within' ---- -
{{CSSRef}}
- -

CSS の :focus-within 擬似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

- -
/* 子孫要素の一つにフォーカスがある <div> を選択 */
-div:focus-within {
-  background: cyan;
-}
- -

このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。

- -

構文

- -{{CSSSyntax}} - -

例

- -

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

- -

HTML

- -
<p>このフォームに入力してみてください。</p>
-
-<form>
-  <label for="given_name">名前:</label>
-  <input id="given_name" type="text">
-  <br>
-  <label for="family_name">苗字:</label>
-  <input id="family_name" type="text">
-</form>
- -

CSS

- -
form {
-  border: 1px solid;
-  color: gray;
-  padding: 4px;
-}
-
-form:focus-within {
-  background: #ff8;
-  color: black;
-}
-
-input {
-  margin: 4px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", 500, 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.focus-within")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_focus-within/index.md b/files/ja/web/css/_colon_focus-within/index.md new file mode 100644 index 0000000000..c3c4b07970 --- /dev/null +++ b/files/ja/web/css/_colon_focus-within/index.md @@ -0,0 +1,97 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - ':focus' + - ':focus-within' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

CSS の :focus-within 擬似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

+ +
/* 子孫要素の一つにフォーカスがある <div> を選択 */
+div:focus-within {
+  background: cyan;
+}
+ +

このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。

+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

+ +

HTML

+ +
<p>このフォームに入力してみてください。</p>
+
+<form>
+  <label for="given_name">名前:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">苗字:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 500, 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.focus-within")}}

+ +

関連情報

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