How can I base one CSS setting on another?

Question

Given the following dynamically generated CSS:

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc; }

How can I extract the background value for use in:

body
{
background-color: VALUE_FROM_UI_WIDGET_HEADER_GOES_HERE;
}

More details: I use jQuery-UI Themeroller and let users upload their own themes. I'd like the page's background color to be based on a color from Themeroller. This lets them customize the background color. Can this be done only in CSS?

Answer 1

There is no way, in CSS, to say "The value of this property should be the same as the value of a property in another rule-set".

For this sort of thing, you would generally use a grouping selector:

.ui-widget-header { border: 1px solid #4297d7; }

.ui-widget-header,
body {
    background: #5c9ccc;
}

Answer 2

There's no way to define relationships in CSS only.

You'd have to use javascript to accomplish what you want.

Answer 3

The "There is no way" answers are correct afaik -- The best you can get is using a CSS framework (or maybe more accurately "compiler") such as Compass that will permit you to define variables, subclasses, and similar in source files that are then compiled to the live CSS. There's a nice roundup of CSS compilers here.