Can a CSS selector reference another selectors property?

Question

I just noticed that Webkit now has some support regarding CSS Values ​​and Units Module Level . And I was wondering if anyone knows if there is a way to reference another CSS selectors property (or DOM type) from the CSS selector?

I expect something like this to be the answer here. What I know most likely relates to current browser implementations; but please continue reading ...

For example, in the case when the animation can resize the element ( NOTE ${.element2.width} is a dummy syntax):

 <style type="text/css"> .element1 { .width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width}); } .element2 { .width: 100px; } .element2:hover { width: 200px; transition: all 0.4s ease-in-out; } </style> 

In this case, I would expect the width of .element1 to be reevaluated based on the transition caused by hover events on .element2.

I understand the above specification. this is only a working draft, but perhaps the syntax for referencing such a “link selector property” is defined in another spec. which I have not yet discovered? Or just not a case for concern (thanks for missing work)?

Thank you in advance for the time spent reading, not to mention answering the question.

Answer 1

I have added the answer to a question related to you: https://stackoverflow.com/a/167448/

• You can use the same ad unit with as many selectors as you want by grouping them (selectors are separated by commas)
• You cannot reuse the same ad unit later with a different CSS selector without overwriting the entire ad unit that is preceded by this selector, or using a preprocessor / macro that does this for you. Or add it to your existing ad unit as described above.

Now with your example of an element modified by CSS itself: you can use CSS3 Media Queries and its @media rules containing as many ad units as you want. These media queries will adapt to the width of the viewport here.
Mixing expanding elements with the help of animated and media queries, which would greatly complicate the opposite effect (and I wonder what content you are playing with); if you want to keep it simple then JS is the way to go. There are variables, loops, events;), and you can trigger CSS3 animations by adding or removing a single class from an element (or any other CSS selector).
CSS3 will not replace JS (and you should not use JS for the HTML style, since JS is not activated or does not exist everywhere, and there is already good fallback CSS there).

Answer 2

Besides using a pre-compiler like sass / scss or less , I believe that all you can do is wait or hard code it.