diff options
Diffstat (limited to 'files/ja/web/css/_colon_focus-within/index.html')
| -rw-r--r-- | files/ja/web/css/_colon_focus-within/index.html | 25 |
1 files changed, 13 insertions, 12 deletions
diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html index c5816dd2ca..1bc44e63ed 100644 --- a/files/ja/web/css/_colon_focus-within/index.html +++ b/files/ja/web/css/_colon_focus-within/index.html @@ -2,21 +2,21 @@ 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' --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 疑似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">擬似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p> -<pre class="brush: css no-line-numbers">/* 子孫要素の一つにフォーカスがある <div> を選択 */ +<pre class="brush: css no-line-numbers notranslate">/* 子孫要素の一つにフォーカスがある <div> を選択 */ div:focus-within { background: cyan; }</pre> @@ -25,15 +25,15 @@ div:focus-within { <h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">{{CSSSyntax}}</pre> +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples" name="Examples">例</h2> <p>この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。</p> <h3 id="HTML">HTML</h3> -<pre class="brush: html"><p>このフォームに入力してみてください。</p> +<pre class="brush: html notranslate"><p>このフォームに入力してみてください。</p> <form> <label for="given_name">名前:</label> @@ -45,7 +45,7 @@ div:focus-within { <h3 id="CSS">CSS</h3> -<pre class="brush: css highlight[7]">form { +<pre class="brush: css highlight[7] notranslate">form { border: 1px solid; color: gray; padding: 4px; @@ -63,7 +63,7 @@ input { <h3 id="Result" name="Result">結果</h3> -<p>{{EmbedLiveSample("Example", 500, 150)}}</p> +<p>{{EmbedLiveSample("Examples", 500, 150)}}</p> <h2 id="Specifications" name="Specifications">仕様書</h2> @@ -84,7 +84,7 @@ input { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> @@ -95,4 +95,5 @@ input { <ul> <li>{{CSSxRef(":focus")}}</li> <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li><a href="https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4">Grab your user's attention with the focus-within selector</a></li> </ul> |