全一致の擬似クラス {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および否定擬似クラスの {{CSSxRef(":not", ":not()")}} は、詳細度の計算では擬似クラスとは見なされません。しかし、セレクターの種類の数を数える時には、これらの擬似クラスの中に置かれたセレクターは、通常のセレクターのように計算されます。

以下の CSS を...

+以下の CSS を... -

div.outer p {
+```css
+div.outer p {
   color: orange;
 }
 
 div:not(.outer) p {
   color: blueviolet;
 }
-

- -

以下の HTML に適用した場合...

- -

<div class="outer">
-  <p>This is in the outer div.</p>
-  <div class="inner">
-    <p>This text is in the inner div.</p>
-  </div>
-</div>
-

+``` -

画面では、以下のように表示されるでしょう。

+以下の HTML に適用した場合... -

+```html +

これは outer の div の中にあります。

これは inner の div の中にあります。

+``` -

:where() の例外 {{Experimental_Inline}}

+画面では、以下のように表示されるでしょう。 -

+{{EmbedLiveSample("The_is_and_not_exceptions")}} -

詳細度を調整する擬似クラス {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} は、自分自身の詳細度が常にゼロで置き換えられます。

+### :where() の例外 -

この一連の CSS で...

+詳細度を調整する擬似クラス {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} は、自分自身の詳細度が常にゼロで置き換えられます。 -

div:where(.outer) p {
+この一連の CSS で...
+
+```css
+div:where(.outer) p {
   color: orange;
 }
 
 div p {
   color: blueviolet;
 }
-

+``` -

#no-where-support {
+```css hidden
+#no-where-support {
   margin: 0.5em;
   border: 1px solid red;
 }
@@ -199,150 +200,128 @@ div p {
 #no-where-support:where(*) {
   display: none !important;
 }
-

+``` -

... 以下の HTML と一緒に使用されたとき ...

+... 以下の HTML と一緒に使用されたとき ... -

<div id="no-where-support">
-⚠️ Your browser doesn't support the <code><a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top">:where()</a></code> pseudo-class.
-</div>
-

+```html hidden +

+⚠️ ブラウザーが :where() 擬似クラスに対応していません。

+``` + +```html +

これは outer の div の中にあります。

これは inner の div の中にあります。

+``` -

<div class="outer">
-  <p>This is in the outer div.</p>
-  <div class="inner">
-    <p>This text is in the inner div.</p>
-  </div>
-</div>
-

- -

... このように画面に表示されます。

+... このように画面に表示されます。 -

+{{EmbedLiveSample("The_where_exception")}} -

形ベースの詳細度

+### 形状に基づく詳細度 -

詳細度は、セレクターの形に基づきます。次の場合、セレクター *[id="foo"] は ID を選択しているにもかかわらず、セレクターの詳細度を決定する目的においては属性セレクターとして計算されます。

+詳細度は、セレクターの形に基づきます。次の場合、セレクター `*[id="foo"]` は ID を選択しているにもかかわらず、セレクターの詳細度を決定する目的においては属性セレクターとして計算されます。 -

以下のスタイル宣言を...

+以下のスタイル宣言を... -

*#foo {
+```css
+*#foo {
   color: green;
 }
 
 *[id="foo"] {
   color: purple;
 }
-

+``` -

この HTML に対して適用すると...

+この HTML に対して適用すると... -

<p id="foo">I am a sample text.</p>
-

+```html +

I am a sample text.

+``` -

このようになってしまうでしょう。

+このようになってしまうでしょう。 -

+{{EmbedLiveSample("Form-based_specificity")}} -

なぜなら、それは同じ要素に一致しますが、 ID セレクターがより高い詳細度をもっているからです。

+なぜなら、それは同じ要素に一致しますが、 ID セレクターがより高い詳細度をもっているからです。 -

文書ツリー内の近接性の無視

+## 文書ツリー内の近接性の無視 -

指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。以下のスタイル宣言と...

+指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。以下のスタイル宣言と... -

body h1 {
+```css
+body h1 {
   color: green;
 }
 
 html h1 {
   color: purple;
 }
-

+``` -

... 以下の HTML で...

+... 以下の HTML で... -

<html>
-  <body>
-    <h1>Here is a title!</h1>
-  </body>
-</html>
-

+```html + + +

これがタイトルです。

+ + +``` -

... このように描画されるでしょう。

+... このように描画されるでしょう。 -

+{{EmbedLiveSample("Tree_proximity_ignorance")}} -

これは、二つの宣言が同じセレクター型数ですが、 html h1 セレクターが最後に宣言されているからです。

+これは、 2 つの宣言で[セレクターの種類](#セレクターの種類)の数が同じですが、 `html h1` セレクターが後に宣言されているからです。 -

直接対象の要素と継承されたスタイル

+### 直接対象の要素と継承されたスタイル -

直接対象となる要素のスタイル付けは、継承された規則の詳細度に関わらず、常に継承されたスタイルより優先されます。この CSS は ...

+直接対象となる要素のスタイル付けは、継承されたルールの詳細度に関わらず、常に継承されたスタイルより優先されます。この CSS は ... -

#parent {
+```css
+#parent {
   color: green;
 }
 
 h1 {
   color: purple;
-}

- -

... 以下の HTML と共に使用します ...

- -

<html>
-  <body id="parent">
-    <h1>Here is a title!</h1>
-  </body>
-</html>

- -

... 以下のように表示されます。

- -

{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}

- -

これは、 h1 セレクターが要素を具体的に対象としていますが、緑のセレクターは親から継承されているだけだからです。

- -

仕様書

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様書	状態	備考
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}	{{Spec2("CSS4 Selectors")}}	詳細度調整セレクター {{CSSxRef(":where", ":where()")}} を追加
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}	{{Spec2("CSS3 Selectors")}}	擬似要素を追加
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}	{{Spec2("CSS2.1")}}	擬似クラスを追加
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}	{{Spec2("CSS1")}}	初回定義

+} +``` + +... 以下の HTML と共に使用します ... + +```html + + +

これがタイトルです。

+ + +``` + +... 以下のように表示されます。 + +{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}} + +これは、 `h1` セレクターが要素を具体的に対象としていますが、緑のセレクターは親から継承されているだけだからです。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}} | {{Spec2("CSS4 Selectors")}} | 詳細度調整セレクター {{CSSxRef(":where", ":where()")}} を追加 | +| {{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}} | {{Spec2("CSS3 Selectors")}} | [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を追加 | +| {{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}} | {{Spec2("CSS2.1")}} | [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)を追加 | +| {{SpecName("CSS1", "#cascading-order", "Cascading order")}} | {{Spec2("CSS1")}} | 初回定義 | -

詳細度の計算方法

詳細度の序列（昇順）

!important の例外

!important の用途

A) インラインスタイルの上書き

B) 高い詳細度の上書き

`!important` を上書きする方法

詳細情報

:is() および :not() の例外

:where() の例外 {{Experimental_Inline}}

形ベースの詳細度

文書ツリー内の近接性の無視

これがタイトルです。

直接対象の要素と継承されたスタイル

仕様書

これがタイトルです。

関連情報

詳細度の計算方法

詳細度の序列（昇順）

!important の例外

!important の用途

A) インラインスタイルの上書き

B) 高い詳細度の上書き

!important を上書きする方法

詳細情報

:is() および :not() の例外

:where() の例外 {{Experimental_Inline}}

形ベースの詳細度

文書ツリー内の近接性の無視

これがタイトルです。

直接対象の要素と継承されたスタイル

仕様書

これがタイトルです。

関連情報

`!important` を上書きする方法