Can a CSS class inherit one or more other classes?

Question

I feel dumb for having been a web programmer for so long and not knowing the answer to this question, I actually hope it's possible and I just didn't know about rather than what I think is the answer (which is that it's not possible).

My question is whether it is possible to make a CSS class that "inherits" from another CSS class (or more than one).

For example, say we had:

.something { display:inline }
.else      { background:red }

What I'd like to do is something like this:

.composite 
{
   .something;
   .else
}

where the ".composite" class would both display inline and have a red background

Answer 1

I ran into this same problem and ended up using a JQuery solution to make it seem like a class can inherit other classes.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

This will find all elements with the class "composite" and add the classes "something" and "else" to the elements. So something like <div class="composite">...</div> will end up like so:
<div class="composite something else">...</div>

Answer 2

In specific circumstances you can do a "soft" inheritance:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

This only works if you are adding the .composite class to a child element. It is "soft" inheritance because any values not specified in .composite are not inherited obviously. Keep in mind it would still be less characters to simply write "inline" and "red" instead of "inherit".

Here is a list of properties and whether or not they do this automatically: https://www.w3.org/TR/CSS21/propidx.html

Answer 3

If you want a more powerful text preprocessor than LESS, check out PPWizard:

http://dennisbareis.com/ppwizard.htm

Warning the website is truly hideous and there's a small learning curve, but it's perfect for building both CSS and HTML code via macros. I've never understood why more web coders don't use it.

Answer 4

The SCSS way for the given example, would be something like:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

More info, check the sass basics

Answer 5

CSS doesn't really do what you're asking. If you want to write rules with that composite idea in mind, you may want to check out compass. It's a stylesheet framework which looks similar to the already mentioned Less.

It lets you do mixins and all that good business.

Answer 6

An element can take multiple classes:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

And that's about as close as you're going to get unfortunately. I'd love to see this feature, along with class-aliases someday.