w3c / w3c/csswg-drafts

[css-cascade-6] Scoping the subject of a `:has()` selector

Open
#9,841 7 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-cascade-6
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

This issue was raised on social media by @mayank99. The goal is to select a scope that has a given element in scope. However, since @scope only requires the 'subject' to be in-scope, and the contents of has are not selecting the subject, there is not currently any way to achieve this.

Here's a code-pen for experimenting.

It seems like this might be solvable (though not elegant) with a :scope-end selector (already proposed in another thread) that matches lower boundary elements:

@scope (my-scope) to (my-scope) {
  :scope:has(a:not(:scope-end a)) { … }
}

(You can get close to that solution by replacing :scope-end with my-scope - but it becomes fragile with further nesting.)

Since this issue seems specific to the :has() selector, the other approach might be changes on that end:

  • Add a :scope-has() selector that does a scoped version of the same thing. It's clear and to the point, but maybe a bit of a special case?
  • Resolve :has() differently when it's used on the :scope() selector. This is even more of a heuristic special case, but it really gets to the point of the issue. We want to know if the scope has something.

Other ideas?

The relevant spec text is:

Their selectors can only match elements that are in scope. (This only applies to the subject; the rest of the selector can match unrestricted.)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the scoped style rules section of CSS Cascade 6 and the linked issue 8617 about :scope-end. Use the linked CodePen to reproduce the scoping cases and compare the proposed :scope-has(), :scope-end, and :has() approaches. Done means the Working Group has chosen and specified a resolution for selecting scoped subjects.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.