This is a sorely missed feature but there's already discussion to support this within CSS. The idea seems to be around having an identifier within the selectors to mark which one is actually getting its properties changed. Something like this:
$p span.fast { color: red; }
In this case the parent is styled because it contains span.fast and the $ is the identifier .
(one of the authors) We agree with you. Yes it is being discussed. But you can do it now with Hitch. Our goal with Hitch isn't necessarily to create a new standard, as much as it is to influence the standards to move more quickly. Likewise with browser vendors.
(the other author) It is definitely worth noting too that this was first proposed and seriously discussed well over a decade ago now. The subject selector is inherently less powerful than the original (has) proposal, but even that got pushed out to selectors level 4 and (if you keep an eye on the lists) there is a very real possibility that it may get shoved to selectors 5.
There are legit reasons for this, don't get me wrong - putting this natively in the browser opens a different can of worms. With Hitch, you "opt-in" and have the option to choose the features that you need. This means that the vast majority of sites can benefit from things that are problematic for the paradoxically hard cases (like the HTML living draft, single page edition with 135k+ and counting elements) -- and we think that is a good thing :)
I wasn't actually saying anything one way or the other about your project, I was just making the comment that there were discussions of doing this directly in CSS.
Interesting... there have been lots of times I've wanted this kind of functionality in jQuery selectors or XPath...
But I just realized I've never once felt like I needed it in CSS. Can anyone give me a real-world example where this would actually be useful for styling? I almost worry this might make CSS more difficult to understand, rather than easier to write.
It would be helpful in cases of dynamically inserting markup into the page. If the CSS was coded to account for the possibilities then you only have to insert your new HTML into the page without having to add a class to its parent.
Say, an unordered list and the list items it contains can be styled based on the content that the list items may happen to contain; again without having to add classes to the parents.
Or maybe a form, you can add an error class to one of the inputs and then style the entire form based on the fact that one of the inputs has the error class.
Another use if you have one person entering text, such as with a CMS, then you can have another person code the CSS to handle differently possibilities of what different parents might contain. That way the person entering the text through a WYSIWYG editor wouldn't have to worry over adding classes to the parents while editing. It'll just happen.
It's not one of those features that will change CSS as we know it but it would be a useful feature. Over the years there were times I really wished I had this feature, mostly because it involved server-side generated HTML that would be a pain to get altered for one reason or another.
:has has been a part of jquery for forever. XPath has axis which allows similar expressive powers.
As noted elsewhere in the comments, this has been long (a decade plus) planned for "some future CSS" by editors and contributors. It didn't make the cut for selectors level 3 for reasons discussed in other comments here. It is currently part of 4 in potentially modified (and less powerful) form.
Personally, I find myself wanting it all the time. I frequently find myself littering HTML with (otherwise nonsensical) classes to achieve the sorts of things that this makes easy.
Yes there has been lots of bike shedding. A lot of people, myself included, have lobbied that ! in CSS is already an abomination (because in normal programming it generally means 'not').
Currently the discussions/draft/etc don't match or agree on what the syntax or capabilities will be.
Our :-hitch-has is based on the original :has proposal and the existing implementation in jQuery as we feel that this is the best (and clearly the most powerful since it allows you to express more).
Comments
This is a sorely missed feature but there's already discussion to support this within CSS. The idea seems to be around having an identifier within the selectors to mark which one is actually getting its properties changed. Something like this:
$p span.fast { color: red; }
In this case the parent is styled because it contains span.fast and the $ is the identifier .
http://davidwalsh.name/css4-preview
I've never understood what amounts to an incredibly useful feature was never considered before.
(one of the authors) We agree with you. Yes it is being discussed. But you can do it now with Hitch. Our goal with Hitch isn't necessarily to create a new standard, as much as it is to influence the standards to move more quickly. Likewise with browser vendors.
I read in that blog article you mentioned :local-link. Hitch also supports this but with even more ability: http://hitchjs.com/describe/bkardell.links/1
We'd love all the feedback we can get. Thanks for taking a look.
(the other author) It is definitely worth noting too that this was first proposed and seriously discussed well over a decade ago now. The subject selector is inherently less powerful than the original (has) proposal, but even that got pushed out to selectors level 4 and (if you keep an eye on the lists) there is a very real possibility that it may get shoved to selectors 5.
There are legit reasons for this, don't get me wrong - putting this natively in the browser opens a different can of worms. With Hitch, you "opt-in" and have the option to choose the features that you need. This means that the vast majority of sites can benefit from things that are problematic for the paradoxically hard cases (like the HTML living draft, single page edition with 135k+ and counting elements) -- and we think that is a good thing :)
I wasn't actually saying anything one way or the other about your project, I was just making the comment that there were discussions of doing this directly in CSS.
Interesting... there have been lots of times I've wanted this kind of functionality in jQuery selectors or XPath...
But I just realized I've never once felt like I needed it in CSS. Can anyone give me a real-world example where this would actually be useful for styling? I almost worry this might make CSS more difficult to understand, rather than easier to write.
It would be helpful in cases of dynamically inserting markup into the page. If the CSS was coded to account for the possibilities then you only have to insert your new HTML into the page without having to add a class to its parent.
Say, an unordered list and the list items it contains can be styled based on the content that the list items may happen to contain; again without having to add classes to the parents.
Or maybe a form, you can add an error class to one of the inputs and then style the entire form based on the fact that one of the inputs has the error class.
Another use if you have one person entering text, such as with a CMS, then you can have another person code the CSS to handle differently possibilities of what different parents might contain. That way the person entering the text through a WYSIWYG editor wouldn't have to worry over adding classes to the parents while editing. It'll just happen.
It's not one of those features that will change CSS as we know it but it would be a useful feature. Over the years there were times I really wished I had this feature, mostly because it involved server-side generated HTML that would be a pain to get altered for one reason or another.
:has has been a part of jquery for forever. XPath has axis which allows similar expressive powers.
As noted elsewhere in the comments, this has been long (a decade plus) planned for "some future CSS" by editors and contributors. It didn't make the cut for selectors level 3 for reasons discussed in other comments here. It is currently part of 4 in potentially modified (and less powerful) form.
Personally, I find myself wanting it all the time. I frequently find myself littering HTML with (otherwise nonsensical) classes to achieve the sorts of things that this makes easy.
I once saw someone try to describe a hypothetical selector that did this using this syntax:
p < span.fast { color: red; }
Although that made perfect sense to me at the time, using some sort of subject signifier ("-hitch-has" or "$") makes much more sense.
While I like the idea, I feel the dollar sign is a poor choice of character.
There are plenty of free chars that wouldn't expect to cause conflicts with things like sass, or appear at a glance to be a variable reference.
The bang (!) sign would make more sense to me. It's already used in css to express priority (!important), so it's not much of a logical jump.
Yes there has been lots of bike shedding. A lot of people, myself included, have lobbied that ! in CSS is already an abomination (because in normal programming it generally means 'not').
Currently the discussions/draft/etc don't match or agree on what the syntax or capabilities will be.
Our :-hitch-has is based on the original :has proposal and the existing implementation in jQuery as we feel that this is the best (and clearly the most powerful since it allows you to express more).