Here is fiddle and I have 2 divs one is outer box and another is the innerBox, On clicking innerBox I need to change the property of the outer box.
As of css3 its not possible, so is anything available in css4?
Asked
Active
Viewed 4,800 times
8
Spudley
- 157,081
- 38
- 222
- 293
Uday Reddy
- 1,028
- 2
- 13
- 32
-
1[there is no such thing as CSS4](http://www.xanthir.com/b4Ko0) – Liam Apr 02 '14 at 12:32
-
1What your really asking is, will any browsers support anything (in the future) that will allow you to do this. How would anyone know without a crystal ball. – Liam Apr 02 '14 at 12:35
-
1possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Jukka K. Korpela Apr 02 '14 at 13:24
-
You could achieve what you want using http://dev.w3.org/csswg/selectors/#has-pseudo – realbart Sep 25 '14 at 09:45
2 Answers
12
There may not be such a thing as CSS4, but there is such a thing as "Selectors Level 4". This is an unfinished spec for the next generation of selectors, and does include a parent selector in the spec. Or more accurately, a "subject" selector.
The spec document is here: http://dev.w3.org/csswg/selectors/
But note that it is a dev URL, and the spec is still very much a work-in-progress.
In real code, the subject selector might look like this:
div > !.foo > span
This would select an element with the class foo, that is a child of a div, and has a span within it as a child.
However as I said, this is not a finished spec (indeed, the syntax for the subject selector has changed more than once during the process, and may still be subject to further change at any time). It is also not implemented yet in any of the browsers, and there is no expectation of it being so either any time soon.
In addition, even if/when Selectors Level 4 is implemented in the browsers, the spec explicitly states that some selectors can be left out of the implementation for performance reasons (they differentiate between 'fast' selectors and the 'complete' set of selectors). The subject selector is one of these: If the spec remains as is, then browsers would have no compulsion to add it to CSS. In this case, they would maybe add it to Javascript, ie for methods like document.querySelector() but not to CSS itself. This wouldn't really help you in any way, since it's already possible to find a parent element via javascript anyway. (See section 2.1 in the spec linked above for more on this).
So the short answer is: No, it isn't possible. It may be possible in the future, but that doesn't help you now, and even in the future there may be show-stopping caveats.
(you may also like to read this article which is a more end-user-friendly document than the actual spec. But you'll note that the subject selector syntax has changed since this article was written)
Spudley
- 157,081
- 38
- 222
- 293
-
Note that the specs for the "subject" selector described above have changed several times since this answer was written, so the code above is no longer anything like what you'd write if you were to use it. However the point about it being only available within JavaScript remains in the spec, so the core point of the answer remains accurate. – Spudley Oct 21 '15 at 22:25
2
As pointed out by the other answer, there is no "CSS4"; there is CSS Selectors 4.
In my opinion, it's best to forget about a CSS parent selector, because it comes with a host of new problems:
With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with
And
What I've described is not technically impossible. In fact, quite the opposite. It just means that we'd have to deal with the performance implications of using such a feature.
But you can easily do it with JS or even use jQuery. It's as simple as calling $('a').parent(); in jQuery to get the parents of <a> tag.
CSS Selectors Level 4 was originally going to implement this feature, but currently plans to only have it implemented in DOM for JavaScript rather than as a CSS selector due to it being "slow".
