[csswg-drafts] [css-nesting][selectors] Behavior of & at the root of a stylesheet (#10287)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting][selectors] Behavior of & at the root of a stylesheet ==
Saw this in https://css-tip.com/root-selector/:

```css
& {
  font-family: sans-serif;
  background: #25fca4;
  --variable: value;
  /* and so on */
}
/* same as html {} and :root {} 
   with a lower specificity! 
*/
```

The `&` matches the root element here _(which could be expected)_ but as for specificity there’s a disagreement amongst vendors:

- Chrome reports `(0,0,0)` as the specificity
- Safari reports `(0,1,0)` as the specificity
- Firefox reports `(0,0,0)` as the specificity _(see test)_

See https://codepen.io/bramus/pen/WNBeOOM/0120b3708bfed9e4099d60e447e37320 for a test: in both Chrome and Firefox the page is blue, whereas in Safari it is lime.

```css
html {
 background: blue;
}

& {
  background: lime;
}
```

So, two questions:

1. What does `&` resolve to here? `html`, `:root`, something else?
2. What is the specificity?

_(The answer to 2 depends on the answer of 1 … unless `0,0,0` is considered to be correct)_

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10287 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 7 May 2024 19:02:41 UTC