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.

Answer 1

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.

Answer 2

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;
}