Can I include a css definition in another css definition?

Question

So let's say I have the following in 'foo.css':

.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

Now let's say that I have two divs I want borders for, so I do:

<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

This works fine, but I find that when defining #foo and #bar in my css file, I would rather give them the characteristics of .border than give the div's the class, like so:

.border { border : solid 1px; }
#foo {
  <incantation to inherit from .border>
  color : #123;
}
#bar {
  <incantation to inherit from .border>
  color : #a00;
}

and then my html would just be:

<div id="foo">Foo</div>
<div id="bar">Bar</div>

Anybody know what that magic incantation is?

Answer 1

That is not supported by css. The best you can do is something like:

#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }