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

1 files changed, 127 insertions, 137 deletions

diff --git a/files/ja/web/css/attribute_selectors/index.md b/files/ja/web/css/attribute_selectors/index.md
index d558c24405..e9b9e5baff 100644
--- a/files/ja/web/css/attribute_selectors/index.md
+++ b/files/ja/web/css/attribute_selectors/index.md
@@ -2,90 +2,90 @@
 title: 属性セレクター
 slug: Web/CSS/Attribute_selectors
 tags:
+  - 属性セレクター
   - CSS
-  - CSS 3 属性セレクター
-  - CSS 属性
-  - Reference
-  - セレクター
-  - ノードの識別
-  - ノードの選択
   - リファレンス
-  - 属性
-  - 属性セレクター
-  - 要素の識別
+  - セレクター
+browser-compat: css.selectors.attribute
 translation_of: Web/CSS/Attribute_selectors
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の<ruby><strong>属性セレクター</strong><rp> (</rp><rt>attribute selector</rt><rp>) </rp></ruby>は、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。</p>
+CSS の**属性セレクター** (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。
 
-<pre class="brush: css no-line-numbers notranslate">/* title 属性を持つ &lt;a&gt; 要素 */
+```css
+/* title 属性を持つ <a> 要素 */
 a[title] {
-		color: purple;
+  color: purple;
 }
 
-/* href が "https://example.org" と一致する &lt;a&gt; 要素 */
+/* href が "https://example.org" と一致する <a> 要素 */
 a[href="https://example.org"] {
-		color: green;
+  color: green;
 }
 
-/* href に "example" を含む &lt;a&gt; 要素 */
+/* href に "example" を含む <a> 要素 */
 a[href*="example"] {
-		font-size: 2em;
+  font-size: 2em;
 }
 
-/* href が "org" で終わる &lt;a&gt; 要素 */
+/* href が "org" で終わる <a> 要素 */
 a[href$=".org"] {
-		font-style: italic;
-}</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<dl>
- <dt><code>[<em>attr</em>]</code></dt>
- <dd><em>attr</em> という名前の属性を持つ要素を表します。</dd>
- <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
- <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> である要素を表します。</dd>
- <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
- <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> と一致する要素を表します。空白区切りの語のリストの形で、複数の <em>value</em> を含めることができます。</dd>
- <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
- <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> と一致するか、 <em>value</em> で始まり直後にハイフン (<code>-</code> (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。</dd>
- <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
- <dd><em>attr</em> という名前の属性の値が <em>value</em> で始まる要素を表します。</dd>
- <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
- <dd><em>attr</em> という名前の属性の値が <em>value</em> で終わる要素を表します。</dd>
- <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
- <dd><em>attr</em> という名前の属性の値が、文字列中に <em>value</em> を1つ以上含む要素を表します。</dd>
- <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
- <dd>閉じ角括弧の前に <code>i</code> (または <code>I</code>) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。</dd>
- <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt>
- <dd>閉じ角括弧の前に <code>s</code> (または <code>S</code>) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Links" name="Links">リンク</h3>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">a {
-		color: blue;
+  font-style: italic;
+}
+
+/* <a> 要素の class 属性に "logo" という語が含まれているもの */
+a[class~="logo"] {
+  padding: 2px;
+}
+```
+
+## 構文
+
+- `[attr]`
+  - : _attr_ という名前の属性を持つ要素を表します。
+- `[attr=value]`
+  - : _attr_ という名前の属性の値が正確に _value_ である要素を表します。
+- `[attr~=value]`
+  - : _attr_ という名前の属性の値が正確に _value_ と一致する要素を表します。空白区切りの語のリストの形で、複数の _value_ を含めることができます。
+- `[attr|=value]`
+  - : _attr_ という名前の属性の値が正確に _value_ と一致するか、 _value_ で始まり直後にハイフン (`-` (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。
+- `[attr^=value]`
+  - : _attr_ という名前の属性の値が _value_ で始まる要素を表します。
+- `[attr$=value]`
+  - : _attr_ という名前の属性の値が _value_ で終わる要素を表します。
+- `[attr*=value]`
+  - : _attr_ という名前の属性の値が、文字列中に _value_ を1つ以上含む要素を表します。
+- `[attr operator value i]`
+  - : 閉じ角括弧の前に `i` (または `I`) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。
+- `[attr operator value s]` {{Experimental_Inline}}
+  - : 閉じ角括弧の前に `s` (または `S`) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。
+
+## 例
+
+### リンク
+
+#### CSS
+
+```css
+a {
+  color: blue;
 }
 
 /* "#" で始まる内部リンク */
 a[href^="#"] {
-		background-color: gold;
+  background-color: gold;
 }
 
 /* URL のどこかに "example" が含まれるリンク */
 a[href*="example"] {
-		background-color: silver;
+  background-color: silver;
 }
 
 /* URL のどこかに "insensitive" が含まれるリンクで、
 			大文字小文字は区別しない */
 a[href*="insensitive" i] {
-		color: cyan;
+  color: cyan;
 }
 
 /* URL のどこかに "cAsE" があるリンクに一致
@@ -96,31 +96,46 @@ a[href*="cAsE" s] {
 
 /* ".org" で終わるリンク */
 a[href$=".org"] {
-		color: red;
-}</pre>
+  color: red;
+}
 
-<h4 id="HTML">HTML</h4>
+/* "https" で始まり ".org" で終わるリンク */
+a[href^="https"][href$=".org"] {
+  color: green;
+}
+```
+
+#### HTML
 
-<pre class="brush: html notranslate">&lt;ul&gt;
-  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+  <li><a href="https://example.org">Example https org link</a></li>
+</ul>
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("Links")}}</p>
+{{EmbedLiveSample("Links")}}
 
-<h3 id="Languages" name="Languages">言語</h3>
+### 言語
 
-<h4 id="CSS_2" name="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">/* `lang` 属性があるすべての div を太字にする。 */
+```css
+/* `lang` 属性があるすべての div を太字にする。 */
 div[lang] {
   font-weight: bold;
 }
 
+/* すべｔの div のうち `lang` 属性のない者をイタリックにする。 */
+div:not([lang]) {
+  font-style: italic;
+}
+
 /* アメリカ英語の div はすべて青。 */
 div[lang~="en-us"] {
   color: blue;
@@ -142,30 +157,30 @@ div[lang|="zh"] {
 div[data-lang="zh-TW"] {
   color: purple;
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
-&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
-&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
-&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
-&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
-</pre>
+```html
+<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+```
 
-<h4 id="Result_2" name="Result_2">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("Languages")}}</p>
+{{EmbedLiveSample("Languages")}}
 
-<h3 id="HTML_ordered_lists" name="HTML_ordered_lists">HTML 順序付きリスト</h3>
+### HTML 順序付きリスト
 
-<p>{{SeeCompatTable}}</p>
+HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 [case-sensitive](#case-sensitive) 修飾子がなければ正しく動作しません。
 
-<p>HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 <a href="#case-sensitive">case-sensitive</a> 修飾子がなければ正しく動作しません。</p>
+#### CSS
 
-<h4 id="CSS_3">CSS</h4>
-
-<pre class="brush: css notranslate">/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */
+```css
+/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */
 ol[type="a"] {
   list-style-type: lower-alpha;
   background: red;
@@ -179,56 +194,31 @@ ol[type="a" s] {
 ol[type="A" s] {
   list-style-type: upper-alpha;
   background: lime;
-}</pre>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html; notranslate">&lt;ol type="A"&gt;
-  &lt;li&gt;Example list&lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h4 id="結果">結果</h4>
-
-<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p>
-
-<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", "#attribute-selectors", "attribute selectors")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>ASCII の大文字小文字を区別する選択、区別しない選択のための修飾子を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td>
-   <td>{{Spec2("CSS3 Selectors")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.selectors.attribute")}}</p>
-
-<h2 id="関連情報">関連情報</h2>
+}
+```
 
-<ul>
- <li>{{CSSxRef("attr")}}</li>
- <li>単一要素の選択: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, {{DOMxRef("Element.querySelector()")}}</li>
- <li>一致するすべての要素の選択: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, {{DOMxRef("Element.querySelectorAll()")}}</li>
- <li>上記のメソッドはすべて {{domxref("ParentNode")}} に混在して実装されています。 {{DOMxRef("ParentNode.querySelector()")}} および {{DOMxRef("ParentNode.querySelectorAll()")}} を参照してください</li>
-</ul>
+#### HTML
+
+```html
+<ol type="A">
+  <li>Example list</li>
+</ol>
+```
+
+#### 結果
+
+{{EmbedLiveSample("HTML_ordered_lists")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef("attr")}}
+- 単一要素の選択: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, {{DOMxRef("Element.querySelector()")}}
+- 一致するすべての要素の選択: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, {{DOMxRef("Element.querySelectorAll()")}}