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

While direct inheritance isn't possible.

It is possible to use a class (or id) for a parent tag and then use CSS combinators to alter child tag behaviour from it's heirarchy.

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

I wouldn't suggest using so many spans like the example, however it's just a proof of concept. There are still many bugs that can arise when trying to apply CSS in this manner. (For example altering text-decoration types).

Answer 2

I think this one is a better solution:

[class*=“button-“] {
  /* base button properties */
}
.button-primary { ... }
.button-plain { ... }

Answer 3

That's not possible in CSS.

The only thing supported in CSS is being more specific than another rule:

span { display:inline }
span.myclass { background: red }

A span with class "myclass" will have both properties.

Another way is by specifying two classes:

<div class="something else">...</div>

The style of "else" will override (or add) the style of "something"

Answer 4

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 5

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.

Answer 6

I was looking for that like crazy too and I just figured it out by trying different things :P... Well you can do it like that:

composite.something, composite.else
{
    blblalba
}

It suddenly worked for me :)