Is there a way to reference an existing CSS style from another CSS style using CSS or javascript?

Question

If I have a style defined

.style1 { width: 140px; }

can I reference it from a second style?

.style2 { ref: .style1; }

Or is there a way via javascript/jQuery?

--- Edit

To clarify the problem, I am trying to apply whatever style is defined for a #x and #c to .x and .c without altering the CSS as the CSS is going to have updates that are out of my control.

I used width but really the style would be something more complex with font, border and other style elements being specified.

Specifying multiple class names does work when the style is being applied to a class so I'll mark existing responses as answers, but I need to take the style being applied to an id and also apply it to a class style ... if that makes any sense.

Answer 1

There's no way to do it with CSS -- it's an oft-requested feature, but not included in the spec yet. You also can't do it directly with JS, but there's sort of a hacky workaround:

$('.style2').addClass ('style1');

Answer 2

you can achieve the same functionality by allowing elements to inherit multiple styles. ex.

<p class="style1 style2">stuff</p>

and then your css would include, for example:

.style1 {width:140px;}
.style2 {height:140px;}

edit: actually robert's answer might better approximate the method you are trying to achieve

.style1, .style2 {width: 140px;}
.style2 {height: 140px;}

<p class="style2">i will have both width and height applied</p>

Answer 3

One way to use the same code for multiple blocks is the following:

 .style1, .style2 { width: 140px; }

Answer 4

Some options:

1. Generate your CSS dynamically, either on the fly or as you're authoring your style sheets (I use a Visual Studio macros to implement constants for fonts, numbers, and colors - and to calculate light/dark tints of colors). This topic has been much discussed elsewhere on this site.

2. If you have a number of styles that are 140px wide and you want to have the flexibility of changing that dimension for all of those styles, you could do this:

   div.FixedWidth {width:140px;}
   div.Style1 {whatever}
   div.Style2 {whatever}
   

and

    <div class="Style1 FixedWidth">...</div>
    <div class="Style2 FixedWidth">...</div>

Answer 5

Are you talking about getting all of the computed styles set on a particular Element and applying those to a second Element?

If that's the case, I think you're going to need to iterate through one Element's computed styles using and then apply those to your other Elements' cssText properties to set them as inline styles.

Something like:

el = document.getElementById('someId');
var cStyle = '';
for(var i in el.style){
  if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });

If you know that you'll only be dealing with a finite set of CSS properties, you could simplify the above as:

el = $('#someId');
var styleProps = {'border-top':true,'width':true,'height':true};
var cStyle = '';
for(var i in styleProps){
  cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });

I'll caveat the above code with the fact that I'm not sure whether or not the IEs will return a CSSStyleDeclaration Object for an HTMLElement's style property like Mozilla will (the first example). I also haven't given the above a test, so rely on it as pseudo-code only.