CSS question - nested styles?

[notfred]

Is it possible to do something like this in CSS?

.border{
border-width: 2px;
border-color: red;
}

.bluecellwithborder{
INCLUDE .border somehow?
background: blue;
}

or even this:
.border_default_color{
INCLUDE .border somehow?
set "border-color" to null
}

You see what I'm getting at?

 

[Barnaby W. Füi]

Nope. I wish you could assign variables and include them and whatnot, that would be nice. You can, however, mix class and id.

div.black { background: black; }
div#blue { color: blue; }

<div class="black">
<div class="black" id="blue">
<div id="blue">

first one would be black background, default foreground, second would be black background, blue foreground, last one would be default background, blue foreground.

 

[notfred]

What if I wanted multiple IDs?

Anyway, what I really want is to be able to, say, do something like bgclass{background:black;} and then include bgclass in other classes, and be able to propagate it to a bunch of other classes, then when someone changes bgclass, it's automatically updated in everything that includes that.

Edit: I swear you hadn't made that edit when I started typing this...

Anyway, what about using multiple IDs?

 

[Barnaby W. Füi]

I don't think you can repeat html attributes, so you couldn't have multiple classes or ids. I could be wrong about that but I don't think I am.

All of the grouping and matching power is in the elements and selectors, instead of having stuff like variable assignment.

div.blah, div.foo, span.yaddayadda, h1.bar { background: grey; }
div.blah, span.yaddayadda { color: white; }

You can also match html attributes. For example: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

I use this to hack the evil AT ads out of gecko browsers, i.e. something like img[alt="AnandTech Forums Servers run on Mushkin Memory"] { display: none !important; visibility: hidden !important; }

But I cannot reveal too much of my highly guarded intellectual property here 😉

 

[jonmullen]

well you can do this:

.border, .bluecellwithborder{
border-width: 2px;
border-color: red;
border-style:solid;

}

.bluecellwithborder{
background: blue;
}

Here you start out by defining the border class and the blucellwithborder class. You then go back and add some values to the bluecellwithborder class, it will inherit all the properties you specified earlier unless you specify and overrideing property in the second class. It worked for me in both IE6 and Firebird, I dont know if there is a better way to do it, but it works and seems to be kind what you are wanting to do.