From e1bb793c6c8afd6558fb3d4767faf4c8b80c59ff Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 26 Oct 2021 23:12:35 +0900 Subject: :focus 系のセレクターの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/25 時点の英語版に同期 --- files/ja/web/css/_colon_focus-within/index.md | 109 ++++++++++++-------------- 1 file changed, 49 insertions(+), 60 deletions(-) (limited to 'files/ja/web/css/_colon_focus-within/index.md') diff --git a/files/ja/web/css/_colon_focus-within/index.md b/files/ja/web/css/_colon_focus-within/index.md index c3c4b07970..b62a217a7e 100644 --- a/files/ja/web/css/_colon_focus-within/index.md +++ b/files/ja/web/css/_colon_focus-within/index.md @@ -5,47 +5,53 @@ tags: - ':focus' - ':focus-within' - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.focus-within translation_of: 'Web/CSS/:focus-within' --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:focus-within`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、その要素または子孫要素にフォーカスがある場合にいっちします。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に `:focus` に該当する要素がある要素を表します。 (これは[シャドウツリー](/ja/docs/Web/Web_Components/Using_shadow_DOM)における子孫も含みます。) -
/* 子孫要素の一つにフォーカスがある <div> を選択 */
+```css
+/* 子孫要素の一つにフォーカスがある 
 を選択 */
 div:focus-within {
   background: cyan;
-}
+} +``` -

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

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

構文

+## 構文 {{CSSSyntax}} -

例

+

例

-

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

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

HTML

+### HTML -
<p>このフォームに入力してみてください。</p>
+```html
+
このフォームに入力してみてください。

 
-<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

+### CSS -
form {
+```css
+form {
   border: 1px solid;
   color: gray;
   padding: 4px;
@@ -59,39 +65,22 @@ form:focus-within {
 input {
   margin: 4px;
 }
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - +``` + +### 結果 + +{{EmbedLiveSample("Examples", 500, 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef(":focus")}} +- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} +- [Grab your user's attention with the focus-within selector](https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4) -- cgit v1.2.3-54-g00ecf