2021/08/13 時点の英語版に同期

1 files changed, 35 insertions, 36 deletions

diff --git a/files/ja/web/css/_colon_has/index.md b/files/ja/web/css/_colon_has/index.md
index c8c0659606..85d42d8ab0 100644
--- a/files/ja/web/css/_colon_has/index.md
+++ b/files/ja/web/css/_colon_has/index.md
@@ -1,59 +1,58 @@
 ---
 title: ':has()'
-slug: 'Web/CSS/:has'
+slug: Web/CSS/:has
 tags:
+  - ':has'
   - CSS
-  - Experimental
-  - Reference
+  - 実験的
+  - リファレンス
   - セレクター
   - リファレンス
   - 擬似クラス
-translation_of: 'Web/CSS/:has'
+browser-compat: css.selectors.has
+translation_of: Web/CSS/:has
 ---
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>:has()</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。</span></p>
+{{CSSRef}}
 
-<p><code>:has()</code> 擬似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 <code>:has</code> はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。</p>
+**`:has()`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。
 
-<pre class="brush: css no-line-numbers">/* &lt;img&gt; 要素を直接中に含む &lt;a&gt; を選択する */
+```css
+/* <img> 要素を直接中に含む <a> を選択する */
 /* なお、これはまだブラウザーが対応していません */
-var test = document.querySelector('a:has(&gt; img)');</pre>
+let test = document.querySelector('a:has(> img)');
+```
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{CSSSyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 解説
+
+`:has()` 擬似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 `:has` はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。すなわち、ブラウザーは現在、 `:has()` のスタイルシートでの使用に対応しています。
+
+## 例
+
+### \<a> 要素のうち直接 \<img> を含んでいるものを選択
+
+次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみを選択します。
+
+    a:has(> img)
+
+### \<h1> 要素のうち直後に \<p> があるものを選択
 
-<p>次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみに一致します。</p>
+次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみを選択します。
 
-<pre>a:has(&gt; img)
-</pre>
+    h1:has(+ p)
 
-<p>次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみに一致します。</p>
+## 仕様書
 
-<pre>h1:has(+ p)</pre>
+{{Specifications}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## ブラウザーの互換性
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#relational", ":has()")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Compat}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## 関連情報
 
-<p>{{Compat("css.selectors.has")}}</p>
+- [セレクターを使用した DOM 要素の特定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
+- [`:scope`](/ja/docs/Web/CSS/:scope)