diff --git a/files/ja/web/css/specificity/index.md b/files/ja/web/css/specificity/index.md index f43801c5c15f3d..dfa735cc5a5b7f 100644 --- a/files/ja/web/css/specificity/index.md +++ b/files/ja/web/css/specificity/index.md @@ -1,6 +1,8 @@ --- title: 詳細度 slug: Web/CSS/Specificity +l10n: + sourceCommit: d71da812ee94c20658cb1916a123a42254ea545c --- {{CSSRef}} @@ -8,7 +10,7 @@ slug: Web/CSS/Specificity **詳細度** (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,11 +477,13 @@ 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. 文書ツリー内の[要素の近接性](#文書ツリー内の近接性の無視)は詳細度に影響しません。 ## 仕様書 @@ -436,24 +491,18 @@ input[type="password"]:required { ## 関連情報 -- [「カスケードと継承」の「詳細度」](/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)モジュール