W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2017

Re: [csswg-drafts] [selectors4] :target-within?

From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
Date: Wed, 29 Nov 2017 01:59:44 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-347727701-1511920783-sysbot+gh@w3.org>
> A more general way of selecting parent elements, rather than confining the ability :focus-within and :target-within, would be amazing. They're a nice start though. I've already found using :focus-within very useful.

The way I see it, `:has()` _is that more general way_, [it's already specced](https://drafts.csswg.org/selectors/#relational), but currently enjoys [zero browser support](https://caniuse.com/#feat=css-has). I too think having a way to select parents would be super helpful, but it seems like instead of supporting `:has()` we're speccing and supporting newer, smaller fragments of what `:has()` is already supposed to be able to do.

Isn't `:focus-within` functionally the same as `:has(:focus)`? And wouldn't `:target-within` be equivalent to `:has(:target)`?

If the general pattern of `:<thing>-within` correlates to `:has(:<thing>)`, then let me brainstorm a few more selector ideas (I'm just pulling the list of existing pseudo-classes from CSS Selectors Level 3 & 4…)

- `:link-within`
- `:visited-within`
- `:hover-within`
- `:active-within`
- `:enabled-within`
- `:checked-within`
- `:empty-within`
- `:blank-within`
- `:drop-within`
- `:current-within`
- `:playing-within`
- `:paused-within`
- `:disabled-within`
- `:valid-within`
- `:required-within`
- etc…

Adding each of these would add quite a bit more of `:has()` original power to CSS, but we'd be missing out on ways to do things like:

- `:has(p)`
- `:has(:nth-of-type(5))`
- etc…

I've experimented quite a bit with selecting parents and ancestors in CSS and I have found it useful, and I've even tried to DIY support like `:has()` using `querySelector()` from the context of elements matching a selector. If you want to check out the ways I've experimented with styling parents and ancestors have a peek at:

- [`$parent` selector in (unofficial) element queries spec](https://tomhodgins.github.io/element-queries-spec/element-queries.html#selectordef-meta-selectors-parent)
- [Selecting the Ancestor of an Element](http://responsive.style/techniques/ancestor-of-element.html)
- [Selecting the Parent os an Element](http://responsive.style/techniques/parent-of-element.html)

Alternatively to speccing a ton of newer, weaker, more limited selectors that do small aspects of what `:has()` should be already able to descrube, I'd love to see browsers actually support `:has()` — does anybody know why that hasn't happened yet?

GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/457#issuecomment-347727701 using your GitHub account
Received on Wednesday, 29 November 2017 01:59:50 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 29 November 2017 01:59:54 UTC