content(Fx142): & inside at-scope blocks has no implicit specificity

files/en-us/web/css/@scope/index.md

@@ -2,7 +2,9 @@
 title: "@scope"
 slug: Web/CSS/@scope
 page-type: css-at-rule
-browser-compat: css.at-rules.scope
+browser-compat:
+  - css.at-rules.scope
+  - css.selectors.nesting.at-scope
 sidebar: cssref
 ---
 
@@ -166,11 +168,15 @@ Here's some considerations for `:scope` within `@scope` blocks:
 
 ### Specificity in `@scope`
 
-Inside an `@scope` rule, both bare selectors and `&` behave as if `:where(:scope)` were prepended to the selector.
-Because [`:where()`](/en-US/docs/Web/CSS/:where) has zero specificity, bare selectors and `&` add zero weight and only the specificity of the rest of the selector counts.
-An `& img` selector is the equivalent to writing `:where(:scope) img`.
+Inside an `@scope` rule, both bare selectors and the [`&`](/en-US/docs/Web/CSS/Nesting_selector) nesting selector behave as if `:where(:scope)` were prepended to the selector.
+Because {{cssxref(":where", ":where()")}} has zero [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), bare selectors and `&` add zero weight. The specificity weight is determined by the rest of the selector.
+For example, the specificity of the `& img` selector is equivalent to the specificity of `:where(:scope) img` (0-0-1).
 
-In both cases in the following example, the only specificity comes from `img` (`0-0-1`):
+> [!WARNING]
+> The specificity of `&` inside `@scope` blocks is handled differently according to the browser engine and release version.
+> Check [Browser compatibility](#browser_compatibility) for details.
+
+In both cases in the following code block, the only specificity comes from `img`:
 
 ```css
 @scope (.article-body) {
@@ -186,8 +192,8 @@ In both cases in the following example, the only specificity comes from `img` (`
 }
 ```
 
-By contrast, using `:scope` explicitly selects the scope root and adds class-level specificity (`0-1-0`), since `:scope` is a pseudo-class.
-In the following example, `:scope img` has a specificity of `0-1-1`:
+By contrast, using `:scope` explicitly selects the scope root and adds class-level specificity (0-1-0), since `:scope` is a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes).
+In the following code block, `:scope img` has a specificity of 0-1-1:
 
 ```css
 @scope (.article-body) {
@@ -457,4 +463,6 @@ In the rendered code, note how all of the `<img>` elements are styled with the t
 
 - {{CSSxRef(":scope")}}
 - {{DOMxRef("CSSScopeRule")}}
+- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Defining the `&` selector in a `@scope` rule](https://css.oddbird.net/scope/parent-selector/) on css.oddbird.net (2025)
 - [Limit the reach of your selectors with the CSS `@scope` at-rule](https://developer.chrome.com/docs/css-ui/at-scope) on developer.chrome.com (2023)

files/en-us/web/css/css_cascade/specificity/index.md

@@ -245,17 +245,9 @@ footer a {
 
 ### How `@scope` blocks affect specificity
 
-Including a ruleset inside a `@scope` block does not affect the specificity of its selector, regardless of the selectors used inside the scope root and limit. For example:
-
-```css
-@scope (.article-body) {
-  /* img has a specificity of 0-0-1, as expected */
-  img {
-  }
-}
-```
-
-However, if you decide to explicitly prepend the `:scope` pseudo-class to your scoped selectors, you'll need to factor it in when calculating their specificity. `:scope`, like all regular pseudo-classes, has a specificity of 0-1-0. For example:
+Including a ruleset inside a {{cssxref("@scope")}} block does not affect the specificity of its selector, regardless of the selectors used inside the [scope root and limit](/en-US/docs/Web/CSS/@scope#syntax).
+However, if you decide to explicitly add the {{cssxref(":scope")}} pseudo-class, you'll need to factor it in when calculating their specificity.
+`:scope`, like all regular pseudo-classes, has a specificity of 0-1-0. For example:
 
 ```css
 @scope (.article-body) {
@@ -265,18 +257,7 @@ However, if you decide to explicitly prepend the `:scope` pseudo-class to your s
 }
 ```
 
-When using the `&` selector inside a `@scope` block, `&` represents the scope root selector; it is internally rewritten to that selector wrapped inside an {{cssxref(":is", ":is()")}} selector. So for example, in:
-
-```css
-@scope (figure, #primary) {
-  & img {
-  }
-}
-```
-
-`& img` is equivalent to `:is(figure, #primary) img`.
-
-Since `:is()` takes the specificity of its most specific argument (`#primary`, in this case), the specificity of the scoped `& img` selector is therefore 1-0-0 + 0-0-1 = 1-0-1.
+See [Specificity in `@scope`](/en-US/docs/Web/CSS/@scope#specificity_in_scope) for more information.
 
 ## Tips for handling specificity headaches