CODEWITHSUNDEEP
css
royco
royco

Reputation: 5529

How can I base one CSS setting on another?

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?

Upvotes: 0

Views: 366

Answers (3)

Ben Regenspan
Ben Regenspan

Reputation: 10548

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.

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245459

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

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

Upvotes: 1

Quentin
Quentin

Reputation: 944084

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;
}

Upvotes: 4

Related Questions