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

An element can take two 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 2

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

Answer 3

You can add multiple classes to a single DOM element, e.g.

<div class="something else thirdclass fourthclass"></div>

I'm not aware of a way to do CSS inheritance.

Answer 4

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 5

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 6

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Answer 7

As others have said, you can add multiple classes to an element.

But that's not really the point. I get your question about inheritance. The real point is that inheritance in CSS is done not through classes, but through element hierarchies. So to model inherited traits you need to apply them to different levels of elements in the DOM.

Answer 8

No you can't do something like

.composite 
{
   .something;
   .else
}

This are no "class" names in the OO sense. .something and .else are just selectors nothing more.

But you can either specify two styles on an element

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

or you might look into another form of inheritance

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Where the paragraphs backgroundcolor and color are inherited from the settings in the enclosing div which is .foo styled. You might have to check the exact W3C specification. inherit is default for most properties anyway but not for all.

Answer 9

In Css file:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Answer 10

Unfortunately, CSS does not provide 'inheritance' in the way that programming languages like C++, C# or Java do. You can't declare a CSS class an then extend it with another CSS class.

However, you can apply more than a single class to an tag in your markup ... in which case there is a sophisticated set of rules that determine which actual styles will get applied by the browser.

<span class="styleA styleB"> ... </span>

CSS will look for all the styles that can be applied based on what your markup, and combine the CSS styles from those multiple rules together.

Typically, the styles are merged, but when conflicts arise, the later declared style will generally win (unless the !important attribute is specified on one of the styles, in which case that wins). Also, styles applied directly to an HTML element take precedence over CSS class styles.

Answer 11

Actually what you're asking for exists - however it's done as add-on modules. Check out this question on Better CSS in .NET for examples.

Check out Larsenal's answer on using LESS to get an idea of what these add-ons do.

Answer 12

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 13

Don't forget:

div.something.else {

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

}

Answer 14

Yes, but not exactly with that syntax.

.composite,
.something { display:inline }

.composite,
.else      { background:red }