Log in / Register

Forum › Samples, Tips and Tricks

Example for pseudo classes :has and :scope?

Johann
According to your reference guide, you support the CSS pseudo-classes :has in conjunction with :scope.
Doesn't :scope require an @scope at-rule?

Could you please show us an example of usage?

- - -
Johann

mikeday
Prince does not support @scope rules yet, however :scope has three meanings:
  • When used at the root level of a stylesheet, :scope is equivalent to :root, which in a regular HTML document matches the <html> element.
  • When used inside a @scope block, :scope matches the block's defined scope root. It provides a way to apply styles to the root of the scope from inside the @scope block itself.
  • When used within a DOM API call — such as querySelector(), querySelectorAll(), matches(), or Element.closest() — :scope matches the element on which the method was called.
Prince currently supports :scope for the querySelector(), querySelectorAll(), and matches() methods in the JavaScript DOM, at all other times :scope is equivalent to :root.