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 tha

Answer 1

There's also SASS, which you can find at http://sass-lang.com/. There's an @extend tag, as well as a mix-in type system. (Ruby)

It's kind of a competitor to LESS.

Answer 2

You can achieve what you want if you preprocess your .css files through php. ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

Answer 3

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 4

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 5

I realize this question is now very old but, here goes nothin!

If the intent is to add a single class that implies the properties of multiple classes, as a native solution, I would recommend using JavaScript/jQuery (jQuery is really not necessary but certainly useful)

If you have, for instance .umbrellaClass that "inherits" from .baseClass1 and .baseClass2 you could have some JavaScript that fires on ready.

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

Now all elements of .umbrellaClass will have all the properties of both .baseClasss. Note that, like OOP inheritance, .umbrellaClass may or may not have its own properties.

The only caveat here is to consider whether there are elements being dynamically created that won't exist when this code fires, but there are simple ways around that as well.

Sucks css doesn't have native inheritance, though.

Answer 6

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