Referencing CSS within CSS

Is there a way to define a CSS class as being equal to another? For example if I had a class:

.myClass{
    background-color: blue;
}

is there a way to define a second class as having the same style as myClass without just copying and pasting?

EDIT:

Sorry, let me be a bit more clear. Is it possible to do this after declaring the first class, possibly开发者_如何学C even in another stylesheet?

Yes, like this:

.myClass,
.mySecondClass,
.myThirdClass {
    background-color: blue;
}

EDIT:

Based on your edit: What you might be looking for, if this is something you really want to do is to look into SASS which basically is like css but with variables and stuffs. But vanilla CSS doesn't have any native support for what you want.

Not with plain CSS. You can do this using a technology called SASS (http://sass-lang.com/), by using the @extend function.

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

I think LESS also has this ability, but I've not verified it.

Are you thinking about creating some sort of variables for your css? If that's the case, you should look into SASS or LESS.

Both of which allow for style variables such as:

/* sass/less css */
@color: #4D926F;

#header { color: @color; }
h2 { color: @color; }

/* rendered css */
#header { color: #4D926F; }
h2 { color: #4D926F; }

LESS also has nested rules so if you have overlapping rules, you don't constantly have to write them over and over.

/* rendered css */
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

/* less css */
#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Hope this gives you more of a starting point :)

.myClass, .myOtherClass{
    background-color: blue;
}