- From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
- Date: Wed, 29 Nov 2017 01:59:44 +0000
- To: public-css-archive@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