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

Question

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 class="class2">

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.

There is no such thing as a CSS class. HTML has classes. CSS has class selectors (but you appear to be talking about rule-sets). — Quentin, Dec 04 '13 at 12:05
add class1 to class2 elements and define specific CSS rules to override for elements having both classes: `.class1.class2 {...}` — A. Wolff, Dec 04 '13 at 12:14
@A.Wolff I can not change the class attribute of elements, because they are generated from framework. I can only define my own CSS file. — Tony, Dec 04 '13 at 12:22
@Tony but you can still use js/jq to add class to specific elements: `$(function(){$('.class2').addClass('class1')});` Or i'm missing something??? Then just set a specifc CSS rule for these elements like posted in my previous comment — A. Wolff, Dec 04 '13 at 12:23
Thank you, yes this is the real option, if I could not do it with pure CSS. — Tony, Dec 04 '13 at 12:25
with all the restrictions explained.. @A.Wolff's comment is the logical route.. — Gabriele Petrioli, Dec 04 '13 at 12:25
I Hope This may help you. http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes — Illaya, Dec 04 '13 at 12:47

Chexpir · Answer 1 · 2013-12-04T14:53:32.190

17

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 class="class2" />

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.

edited Dec 04 '13 at 14:53

answered Dec 04 '13 at 12:01

Chexpir

1,876
18
33

4

you need to add a comma after .class1 – Bas van Dijk Dec 04 '13 at 12:02
This still works today, FYI. I tested it out. Thanks – CaptainGenesisX Aug 11 '20 at 12:42

score 12 · Answer 2 · answered Dec 04 '13 at 12:03

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 class="menu nav">

Generating your CSS programatically

For example, with SASS

@mixin menu {
    font-weight: bold;
}

.nav {
    display: inline-block;
    @include menu;
}

Cool answer, but I have more strict requirements. please check updated question. — Tony, Dec 04 '13 at 12:18

score 4 · Answer 3 · answered Dec 04 '13 at 12:03

4

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.

answered Dec 04 '13 at 12:03

Wellington Zanelli

1,894
3
18
43

1

Thank you, but I can not use Less, please check updated question. – Tony Dec 04 '13 at 12:06

score 4 · Answer 4 · answered Dec 04 '13 at 13:52

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:

Cannot change html
Cannot change the css file that defines .class1.
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.

Thank you. I can not change the css file, that defines .class2 (item 3). But I hope I could replace (override) the .class2 in my css file that comes after. And yes you are right I've not used less so far. Does Less compile the css for every request? — Tony, Dec 04 '13 at 14:33
@Tony: I see. The cascade of CSS is overriding `.class2`. Ok, the same principle in my answer still applies, just that you are making your override file using the `.class1` as a LESS mixin. LESS is designed to be a preprocessor, so normally compiling is done before any request, and the request itself is for the output css file that was created by LESS. This should be fine if `.class1` does not change often. If it potentially changes per request, then you would have to run LESS client side (which is not recommended for speed purposes, but if you are just defining one class, that may be okay). — ScottS, Dec 04 '13 at 15:51

score 3 · Answer 5 · answered Dec 04 '13 at 12:01

3

Yes, it is possoble.

Write:

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

More info here.

answered Dec 04 '13 at 12:01

codingrose

15,563
11
39
58

@downvoter, please have courtesy to comment down the reason. – codingrose Jan 03 '18 at 12:26
How is your answer any different than the answer of @Chexpir ? – Ghazali Nov 16 '20 at 10:58
@Ghazali we both posted at same time. You may check the timestamp and it's a co incident – codingrose Feb 24 '21 at 11:21
Didn't notice. Thanks for pointing it out. – Ghazali Feb 25 '21 at 12:32

score 1 · Answer 6 · answered Dec 04 '13 at 12:10

1

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.

answered Dec 04 '13 at 12:10

Nitesh

15,425
4
48
60

score 1 · Answer 7 · answered Aug 01 '21 at 12:15

1

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

.class1
  text-indent: 100

.class2
  @extend .class1

answered Aug 01 '21 at 12:15

lyh543

847
6
8

It works with SCSS but I have no idea how to use it in existing projects – Intacto Jul 10 '23 at 20:05

nrsharma · Answer 8 · 2013-12-04T12:12:16.477

0

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*/ }

edited Dec 04 '13 at 12:12

answered Dec 04 '13 at 12:02

nrsharma

2,532
3
20
36

Thank you, but that is not an option. Please check updated question. – Tony Dec 04 '13 at 12:09

score 0 · Answer 9 · answered Dec 04 '13 at 12:04

0

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 class="class1 class2" />

another is to name both classes when setting the properties

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

.class2{/*extra properties here*/}

answered Dec 04 '13 at 12:04

Gabriele Petrioli

191,379
34
261
317

@Tony I am sure that answer you need. And this is a greath asnwer! – NoWar Jul 30 '15 at 19:11
2

@Dimi not really, because I cannot change `` to ``. This html is generated not by me. – Tony Aug 10 '15 at 09:20

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

9 Answers9

Linked