How to reuse css class content in another class without copying?

Is it possible to use existing css class as content in another class ?

I mean something like:

/* Contained in some library: */ .class1 { text-indent: 100 } 

/* I can not change this: */ <span> 

The definition for class2 is also contained in another library. So I can not change it directly.

/* But I want to do something like that in my CSS file: */ .class2 { .class1 } 

I know it is not possible in that form. But maybe one can use some trick to achieve the behaviour without copying of the content of class1? I need this because I want to redefine class with content from another CSS class. Our project uses jQuery as well, but I would do it rather with CSS.

EDIT: I should explain more, I could not change how .class1 is defined, because this class is in a library, and I could not change mark up on span class.

9 Answers

It is imposible to do in standard CSS what you are commenting, as there is not pure inheritance.

Despite it doesn't apply with your code restrictions, this is the closer way to do it:

 .class1, .class2 { text-indent: 100 } .class2 { /* Styles you want to have only in class 2 */ } <span /> 

On the other hand, as @A. Wolff has pointed out, you can still use js/jq to add class to specific elements: $(function(){$('.class2').addClass('class1')}); Then just set a specifc CSS rule for these elements.

In case you don't want to use JS, for something like that you'd need to use SASS or similar, which "compiles" to CSS.

CSS has no means to reference one rule-set from another.

Your options include:

Using multiple selectors for things with common rules

.menu, .nav { font-weight: bold; } .nav { display: inline-block; } 

Using multiple classes on a single element

.menu { font-weight: bold; } .nav { display: inline-block; } <li> 

Generating your CSS programatically

For example, with SASS

@mixin menu { font-weight: bold; } .nav { display: inline-block; @include menu; } 

Yes, it is possoble.

Write:

.class1,.class2 {text-indent:100;} .class1{color:red;} .class2{font-size:30px;} 

More info here.

Another option is to use LESS to do this. It's a very good tool and do some improvements to your CSS development.

Take a look at theirs documentation, it's very nice. About the compilers, I use Koala and recommend it.

You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:

1. Cannot change html
2. Cannot change the css file that defines .class1.
3. You can change the css file that defines .class2.

If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2 a .less file. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).

Step One: Make the CSS into LESS

Create a file, let's say CSStoLESS.less and put this in it:

@import (less) /path/to/your/your-css-defining-class1.css; 

This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.

Step Two: Use that file as reference in your LESS

By doing this in your .less file defining .class2:

@import (reference) /path/to/your/CSStoLESS.less; .class2 { .class1; } 

You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1 or anything else contained in your original css file. Now you can use an inclusion of .class1 just like you show in your question to make the properties of .class1 become that of .class2.

It may be that this alone works:

@import (reference) /path/to/your/your-css-defining-class1.css; .class2 { .class1; } 

What I don't know is if the (reference) inclusion also defaults to making .css into LESS code like the (less) inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.

The best way would be to redeclare class1 just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.

I am assuming you want whatever is in .class1 plus some extra properties in .class2

One way is to simply apply both classes to the element you want..

<span /> 

another is to name both classes when setting the properties

.class1, .class2 {text-indent: 100} .class2{/*extra properties here*/} 

You can define 2 classes in this way

.class1, .class2 { text-indent: 100 } 

And it will work for you

Moreover if you want to ad some more in class2 then you can define it

.class2 { /*whatever you want here*/ } 

Others mentioned SASS and LESS. Here's the solution of Stylus:

.class1 text-indent: 100 .class2 @extend .class1