2024/08/08 時点の英語版に基づき更新

files/ja/web/css/specificity/index.md

@@ -1,14 +1,16 @@
 ---
 title: 詳細度
 slug: Web/CSS/Specificity
+l10n:
+  sourceCommit: d71da812ee94c20658cb1916a123a42254ea545c
 ---
 
 {{CSSRef}}
 
 **詳細度** (Specificity) は、ある要素に最も関連性の高い [CSS 宣言](/ja/docs/Learn/CSS/First_steps/What_is_CSS#css_の構文)を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、[CSS セレクター](/ja/docs/Web/CSS/Reference#セレクター)の重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。
 
 > [!NOTE]
-> ブラウザーは、[カスケードのオリジンと重要度](/ja/docs/Web/CSS/Cascade)を決定した後に、詳細度を検討します。言い換えれば、プロパティ宣言が競合している場合、そのプロパティの優先順位を保有する 1 つの[カスケードのオリジンとレイヤー](/ja/docs/Web/CSS/@layer)のセレクター間でのみ、詳細度が関連し比較されます。優先順位を持つカスケードレイヤーで競合する宣言のセレクターの詳細度が等しいとき、出現順序が関連するようになります。
+> ブラウザーは、[カスケードのオリジンと重要度](/ja/docs/Web/CSS/Cascade)を決定した**後**に、詳細度を検討します。言い換えれば、プロパティ宣言が競合している場合、そのプロパティの優先順位を保有する 1 つの[カスケードのオリジンとレイヤー](/ja/docs/Web/CSS/@layer)のセレクター間でのみ、詳細度が関連し比較されます。優先順位を持つカスケードレイヤーで競合する宣言のセレクターの詳細度が等しいとき、[スコープの詳細度](/ja/docs/Web/CSS/@scope#scope_の競合の解決方法)と出現順序が関連するようになります。
 
 ## 詳細度の計算方法
 
@@ -29,9 +31,13 @@ slug: Web/CSS/Specificity
 - 値なし
   - : 全称セレクター ({{CSSxRef("Universal_selectors", "*")}}) および擬似クラス {{CSSxRef(":where", ":where()")}} とその引数は、重みの計算にはカウントされませんが、要素には一致します。全称セレクターと擬似クラスの値は 0-0-0 です。これらのセレクターは詳細度の計算に影響を与えません。
 
-結合子（{{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, [" "](/ja/docs/Web/CSS/Descendant_combinator), {{CSSxRef("Column_combinator", "||")}}）は、何を選択するのかをより具体化することができますが、詳細度の重みに値を追加することはありません。
+結合子（{{CSSxRef("Next-sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("Subsequent-sibling_combinator", "~")}}, [" "](/ja/docs/Web/CSS/Descendant_combinator), {{CSSxRef("Column_combinator", "||")}}）は、何を選択するのかをより具体化することができますが、詳細度の重みに値を追加することはありません。
 
-否定擬似クラスである {{CSSxRef(":not", ":not()")}} 自身は重みがありません。 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":has", ":has()")}} 擬似クラスも同様です。しかし、これらのセレクターの引数は重みを持ちます。どちらの値も、引数リストの中で最も詳細度の高い引数から採用されます。 [`:not()`, `:is()` および `:has()` の例外](#is_not_および_has_の例外) については、後ほど説明します。
+`&` 結合子は詳細度の重みを追加しませんが、入れ子になったルールは詳細度を追加します。詳細度および機能性の観点では、入れ子は{{CSSxRef(":is", ":is()")}} 擬似クラスとよく似ています。
+
+入れ子と同様に、擬似クラスである {{CSSxRef(":is", ":is()")}}、{{CSSxRef(":has", ":has()")}}、否定 ({{CSSxRef(":not", ":not()")}}) 自体は重みを持ちません。しかし、これらのセレクターの引数は重みを持ちます。各セレクターの重みは、最も高い詳細度を持つセレクターのリストに掲載されているセレクターの引数から取得されます。同様に、入れ子になったセレクターの場合、入れ子になったセレクター部分が加える詳細度は、最も高い詳細度を持つ入れ子になったセレクターのカンマ区切りのリストに掲載されているセレクターです。
+
+[`:not()`, `:is()` および `:has()` の例外](#is、not、has、css_入れ子の例外) については、後ほど説明します。
 
 #### 一致するセレクター
 
@@ -51,7 +57,7 @@ input:focus,
 
 `id="myApp"` という属性を持つ要素にネストされた必須入力の詳細度は、 1 つの ID、 2 つの擬似クラス、 1 つの要素型に基づいて、 `1-2-1` となります。
 
-パスワード入力型が `id="myApp"` が設定された要素にネストされている場合、フォーカスがあるかどうかに関わらず、詳細度の重みは `1-2-1` になります。なぜこの場合、詳細度の重みが `0-1-1` や `0-1-0` ではなく、 `1-2-1` になるのでしょうか？それは、詳細度の重みが最も大きい一致するセレクターから、詳細度の重みが決まるからです。重みは 3 つの列の値を左から右に比較することで決定されます。
+パスワード入力型に `required` がついている場合、 `id="myApp"` が設定された要素の内部にある場合、フォーカスがあるかどうかに関わらず、詳細度の重みは ID ひとつ、擬似クラス 2 つ、要素型 1 つなので `1-2-1` になります。なぜこの場合、詳細度の重みが `0-1-1` や `0-1-0` ではなく、 `1-2-1` になるのでしょうか？それは、詳細度の重みが最も大きい一致するセレクターから、詳細度の重みが決まるからです。重みは 3 つの列の値を左から右に比較することで決定されます。
 
 ```css
 [type="password"]             /* 0-1-0 */
@@ -109,7 +115,7 @@ input.myClass {
 }
 ```
 
-### `:is()`, `:not()` および `:has()` の例外
+### `:is()`、`:not()`、`:has()`、CSS 入れ子の例外
 
 全一致の擬似クラス {{CSSxRef(":is", ":is()")}}, 否定擬似クラス {{CSSxRef(":not", ":not()")}} および関係擬似クラス {{CSSxRef(":has", ":has()")}} は、詳細度の計算では擬似クラスとは見なされません。それ自体は、詳細度算出のための重みを追加するものではありません。しかし、擬似クラスの括弧に渡されたセレクターの引数は、詳細度アルゴリズムの一部です。詳細度値の計算における一致するセレクターと否定の擬似クラスの重みは、引数の[重み](#セレクターの重み分類)となります。
 
@@ -120,12 +126,14 @@ p {
 :is(p) {
   /* 0-0-1 */
 }
+
 h2:nth-last-of-type(n + 2) {
   /* 0-1-1 */
 }
 h2:has(~ h2) {
   /* 0-0-2 */
 }
+
 div.outer p {
   /* 0-1-2 */
 }
@@ -155,6 +163,19 @@ div:not(.inner, #fakeId) p {
 
 上記の CSS コードブロックでは、セレクターに `#fakeId` が含まれています。この `#fakeId` は、各段落の詳細度の重みに `1-0-0` を追加します。
 
+[CSS 入れ子](/ja/docs/Web/CSS/CSS_nesting)を使用して複雑なセレクターリストを作成した場合、この動作は `:is()` 擬似クラスとまったく同じです。
+
+```css
+p,
+#fakeId {
+  span {
+    /* 1-0-1 */
+  }
+}
+```
+
+上記のコードブロックでは、複雑なセレクター `p, #fakeId` の詳細度は `#fakeId` から導かれると同時に `span` からも導かれるため、`p span` と `#fakeId span` の両方に対して `1-0-1` という詳細度が作成されます。これは、`:is(p, #fakeId) span` セレクターと同等の詳細度です。
+
 一般的に、詳細度は最小限に抑えたいものですが、特定の理由で要素の詳細度を上げる必要がある場合は、この 3 つの擬似クラスが役に立ちます。
 
 ```css
@@ -217,6 +238,38 @@ footer a {
 }
 ```
 
+### `@scope` ブロックが詳細度に影響する方法
+
+`@scope` ブロック内にルールセットを記述しても、セレクターが使用されるスコープのルートや制限に関わらず、そのセレクターの特定の詳細度には影響しません。例えば次のようになります。
+
+```css
+@scope (.article-body) {
+  /* img はの詳細度は期待通り 0-0-1 になる */
+  img { ... }
+}
+```
+
+しかし、もし明示的に `:scope` 擬似クラスをスコープ付きセレクターの前に追加する場合は、その詳細度を計算する際に考慮する必要があります。 `:scope` は、すべての通常の擬似クラスと同様に、 0-1-0 の詳細度を持ちます。
+
+```css
+@scope (.article-body) {
+  /* :scope img の詳細度 0-1-0 + 0-0-1 = 0-1-1 となる */
+  :scope img { ... }
+}
+```
+
+`@scope` ブロック内で `&` セレクターを使用する場合、 `&` はスコープルートセレクターを表します。これは、内部的には {{cssxref(":is", ":is()")}} セレクターで囲まれたセレクターに書き換えられます。例えば、次のような場合です。
+
+```css
+@scope (figure, #primary) {
+  & img { ... }
+}
+```
+
+`& img` は `:is(figure, #primary) img` と同等です。
+
+`:is()` は最も詳細度の高い引数（この場合は `#primary`）の詳細度を取るので、スコープされた `& img` セレクターは 1-0-0 + 0-0-1 = 1-0-1 となります。
+
 ## 詳細度に関する頭痛の種を処理するためのヒント
 
 `!important` を使用する代わりに、カスケードレイヤーを使用し、 CSS 全体を通して、より詳細なルールで簡単にスタイルを上書きできるように、重み付けを低くすることを検討してください。 セマンティック HTML を使用すると、スタイルを適用するためのアンカーを提供するのに役立ちます。
@@ -424,36 +477,32 @@ input[type="password"]:required {
 
 1. 詳細度は、同じ要素が同じカスケードレイヤーやオリジンの複数の宣言によってターゲットにされている場合にのみ適用されます。特定度は、同じ重要度、同じオリジン、[カスケードレイヤー](/ja/docs/Web/CSS/@layer)の宣言にのみ関係します。一致するセレクターが異なるオリジンにある場合、[カスケード](/ja/docs/Web/CSS/Cascade)はどちらの宣言が優先されるかを決定します。
 
-2. 同じカスケードレイヤー、同じオリジンにある 2 つのセレクターが同じ詳細度にある場合、近接度が重要であり、最後のセレクターが勝ちます。
+2. 2 つのセレクターが同じカスケードレイヤーとオリジンで同じ詳細度を持っている場合、スコープの近接度が計算されます。最もスコープの近接度が低いルールセットが優先されます。詳細と例えばについては、 [`@scope` の競合の解決方法](/ja/docs/Web/CSS/@scope#scope_の競合の解決方法)を参照してください。
+
+3. スコープの近接度がどちらのセレクターでも同じである場合、ソースの順序が重要になります。すべてがまったく同じである場合、最後のセレクターが優先されます。
 
-3. CSS のルールとして、要素が祖先から継承するルールよりも、[直接対象となる要素](#直接対象の要素と継承されたスタイル) が常に優先されます。
+4. CSS のルールとして、要素が祖先から継承するルールよりも、[直接対象となる要素](#直接対象の要素と継承されたスタイル) が常に優先されます。
 
-4. 文書ツリー内の[要素の近接性](#文書ツリー内の近接性の無視)は詳細度に影響しません。
+5. 文書ツリー内の[要素の近接性](#文書ツリー内の近接性の無視)は詳細度に影響しません。
 
 ## 仕様書
 
 {{Specifications}}
 
 ## 関連情報
 
-- [「カスケードと継承」の「詳細度」](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2)
-- [SpeciFISHity](https://specifishity.com)
+- [「カスケードと継承」の「詳細度」](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#詳細度)
+- [SpeciFISHity](https://specifishity.com/)
 - [Specificity Calculator](https://specificity.keegan.st/): 自身の CSS ルールをテストし、理解するための対話型ウェブサイト
-- [_ID-CLASS-TYPE_ exercise](https://estelle.github.io/CSS/selectors/exercises/specificity.html) 詳細度クイズ
-- CSS の主要概念:
-  - [CSS の構文](/ja/docs/Web/CSS/Syntax)
-  - [アットルール](/ja/docs/Web/CSS/At-rule)
-  - [コメント](/ja/docs/Web/CSS/Comments)
-  - [継承](/ja/docs/Web/CSS/Inheritance)
-  - [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
-  - [レイアウトモード](/ja/docs/Web/CSS/Layout_mode)
-  - [視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)
-  - [マージンの相殺](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
-  - 値
-    - [初期値](/ja/docs/Web/CSS/initial_value)
-    - [計算値](/ja/docs/Web/CSS/computed_value)
-    - [使用値](/ja/docs/Web/CSS/used_value)
-    - [実効値](/ja/docs/Web/CSS/actual_value)
-  - [値の定義構文](/ja/docs/Web/CSS/Value_definition_syntax)
-  - [一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)
-  - [置換要素](/ja/docs/Web/CSS/Replaced_element)
+- [_ID-CLASS-TYPE_ exercise](https://estelle.github.io/CSS/selectors/exercises/specificity.html) 詳細度クイズ（英語）
+- [CSS の構文](/ja/docs/Web/CSS/Syntax)ガイド
+- [CSS 構文](/ja/docs/Web/CSS/CSS_syntax) モジュール
+- [CSS のエラーの扱い](/ja/docs/Web/CSS/CSS_syntax/Error_handling)
+- [アットルール](/ja/docs/Web/CSS/At-rule)
+- [継承](/ja/docs/Web/CSS/Inheritance)
+- [初期値](/ja/docs/Web/CSS/initial_value)、[計算値](/ja/docs/Web/CSS/computed_value)、[使用値](/ja/docs/Web/CSS/used_value)、[実効値](/ja/docs/Web/CSS/actual_value)
+- [値の定義構文](/ja/docs/Web/CSS/Value_definition_syntax)
+- [構成要素: CSS カスケード](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+- [構成要素: カスケードレイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)
+- [CSS カスケードと継承](/ja/docs/Web/CSS/CSS_cascade)モジュール
+- [CSS 入れ子](/ja/docs/Web/CSS/CSS_nesting)モジュール