css class within another class as a property

Question

I'm wanting to use properties from other css classes without having to rewrite the code...I'm not too savvy with css so please forgive me for the simple question.

Is it possible to do something like this or similar to it in css?

.class_a {
    background:red;
}

.class_b{
    .class_a;
}

Answer 1

The best way (that I know of) to re-use css classes is to decide on the css attributes you want to re-use, and put this in a seperate class, like so:

.class_a {
    background:red;
}

Then, every time you want to re-use these attributes, you add the class to the html element, with spaces in between different class names, like so:

<div class="text class_a">This will be red, and have the properties of the text class</div>
<div class="text">This will only have the properties of the text class</div>

Answer 2

You can use the same property list for more than one selector:

.class_a, .class_b {
    background:red;
}

Answer 3

There are CSS tools which allow you to code in the way you describe. You just do some post-processing of your code to produce valid CSS.

Check out LESS.

Answer 4

Not possible using CSS. However, you can achieve this using something like Sass. Sass allows you write CSS with enhancements such as the one you described. Unfortunately, this introduces an extra step since Sass files must be converted to CSS before you can use them on your page. Could help save you a lot of typing though :)