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

For those who are not satisfied with the mentioned (excellent) posts, you can use your programming skills to make a variable (PHP or whichever) and have it store the multiple class names.

That's the best hack I could come up with.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Then apply the global variable to the element you desire rather than the class names themselves

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Answer 2

Don't forget:

div.something.else {

    // will only style a div with both, not just one or the other

}

Answer 3

Perfect timing: I went from this question to my email, to find an article about Less, a Ruby library that among other things does this:

Since super looks just like footer, but with a different font, I'll use Less's class inclusion technique (they call it a mixin) to tell it to include these declarations too:

#super {
  #footer;
  font-family: cursive;
}

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

You can apply more than one CSS class to an element by something like this class="something else"

Answer 6

Keep your common attributes together and assign specific (or override) attributes again.

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}