How to reference css properties from other classes

[James in Vancouver]

I would like to be able to use the css properties that haves been previously set to class in a css class.

For example

.light {
 color: gray;
 background: white;
}
.dark {
 color: black;
 background: gray;
}

And then later on be able to define a new tag that inherits the .light attributes:

table.striped td.odd-column {
 inherit: .light;
}
table.striped td.even-column {
 inherit: .dark;
}

obviously however there is no inherit attribute. Is there some way of doing this that I just haven't found? I have looked around quite a bit and I haven't been able to find anything that lets you do this. However, I'm not to sure what to look for.

It seems like this should be a extremely useful concept for css template systems. To only have to define a colour or font or other attribute once and then inherit it to all the appropriate classes would make fine tuing and adjusting much easier. Particularly when different classes are in different style sheets.

Thanks,
James

[createErrorMsg]

To only have to define a colour or font or other attribute once and then inherit it to all the appropriate classes would make fine tuing and adjusting much easier.

There is no feature that matches exactly what you describe, but there are practices that can be used when designing to make what you describe essentially occur.

Multiple class names in HTML:

One option is to not "inherit" the styles into the new CSS selector, but to apply those styles directly to the element in the HTML via multiple classes. To take your example of .light and .dark, if you wanted a table with class name .striped to also have the styles from .dark, you can call multiple classes in the HTML...

<table class="striped dark">

Comma delimited selector lists:

If you have multiple classes that you want to apply the same styles to, you can list them in a comma delimited list as the selector portion of the rule declaration. So if you want to define a generic .dark class, but to also apply those .dark styles to the .striped table's even columns...

.dark, table.striped td.even-column {
color: black;
background: gray;
}

Personally, I prefer the first option, since it's sort of the entire point behind class names to begin with: creating style blocks to apply to any element you want, but I also frequently use the second method to save multiple repetitions of the same styles in a document.

cEM