":root is a CSS pseudo-class that matches the root element of the current (XML) document. If the current document is a HTML document, then it matches <html>. The specificity of pseudo-classes (0-1-0) is higher than that of elements (0-0-1), so you're less likely to run into conflicts with :root."
":scope matches the global scope root (<html>). However, this is only true when not used within the newly baseline at-rule, which is used to define a custom scope root. It's conventional to declare global custom properties on :root, but :scope semantically matches the global scope."
"When & isn't nested, it simply selects the scope root, which outside of an @scope block is <html>. The & selector is normally used with CSS nesting to concatenate the current selector to the containing selector, enabling nesting even when not technically dealing with nested selectors."
CSS offers multiple pseudo-classes and selectors for targeting the root element and managing scope. The :root pseudo-class matches the HTML element with higher specificity (0-1-0) than element selectors (0-0-1), making it useful for declaring global custom properties. The :scope pseudo-class semantically matches the global scope root and becomes particularly useful within @scope at-rules for defining custom scope roots. The & selector, typically used with CSS nesting to concatenate selectors, also selects the scope root when not nested. Additionally, :has() pseudo-class can target elements containing specific children, such as :has(head) or :has(body) for selecting HTML elements with those children.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]