Make children CSS attributes depend on parent element size (like media queries depend on browser width)

Question

I have a form structure dependent on browser window width: to simplify question, assume it has three levels (begin from widest case):

1. Field label on the left, input field in the centre and field description on the right
2. Field label on the left, input field in the centre and field description below input field
3. Field label on the top, input field in the middle and field description on the bottom

It's done by something like this:

@media (max-width:1000px) { /* code for 1. */ }
@media (max-width:900px) { /* code for 2. */ }
@media (max-width:800px) { /* code for 3. */ }

What I'm asking for is to get the same functionality for all elements, so when I put a form into div which have 1000px width, CSS will apply to that particular form same properties which are used to style 1st layout (max-width:1000px). When this div will shrink to 800px the form should automatically restyle to the 3rd layout even when browse window still has width set to 1000px.

Is it possible?

Answer 1

Thanks to the second link in @torazaburo's comment under question post, I found the perfect solution:

https://github.com/marcj/css-element-queries

Yet it's very young project it still has some vulnerabilities (29 july 2013) but also has a potential. It isn't based on @element queries but on attributes. Example:

.fooDiv[min-width="1000px"] .form { /* code for 1. */ }
.fooDiv[min-width="900px"] .form { /* code for 2. */ }
.fooDiv[min-width="800px"] .form { /* code for 3. */ }

Those attributes are set by listeners, so they work on each change of size of .fooDiv.

---

Another project (incompatible with SASS/SCSS),

https://github.com/Mr0grog/element-query

will work as follow:

.test-element:media(max-available-width: 400px) {
    background: purple;
}

In the above CSS, .test-element will have a purple background if it is inside an element that is 400px wide or smaller.

---

Yet another,

https://github.com/tysonmatanich/elementQuery I use it in everyday projects.

---

Even more about this:

http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/