Uma classe CSS pode herdar uma ou mais outras classes?

Pode adicionar várias classes a um único elemento DOM, por exemplo

<div class="firstClass secondClass thirdclass fourthclass"></div>

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Um elemento pode ter várias classes:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

Mantenha os seus atributos comuns juntos e atribua atributos específicos (ou sobreponha) de novo.

/*  ------------------------------------------------------------------------------ */   
/*  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;
}

.composite 
{
   .something;
   .else
}

Mas pode especificar duas classes num elemento

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

Ou podes olhar para outra forma de herança

.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>

Onde os parágrafos backgroundcolor e cor são herdados das configurações do div que é .foo estilizado. Talvez tenha de verificar a especificação exacta do W3C. inherit é o valor por omissão para a maioria das propriedades, mas não para todas.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Isto vai encontrar todos os elementos com a classe "compósito" e adicionar as classes "algo" e "outro" aos elementos. Então algo como <div class="composite">...</div> vai acabar assim:
<div class="composite something else">...</div>

A maneira de SCSS para o exemplo dado, seria algo como:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

Mais informações, verifique as noções básicas de

div.something.else {

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

}

O melhor que podes fazer é isto

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

No ficheiro Css:

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

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

Timing perfeito: Eu fui desta pergunta para o meu e-mail, para encontrar um artigo sobremenos , uma biblioteca de Ruby que entre outras coisas Faz isto:

desde super parece que footer, mas com um tipo de letra diferente, eu vou usar a técnica de inclusão de classe de Less (eles chamam de mixin) para dizer-lhe para incluir estas declarações também:

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

Se a intenção é adicionar uma única classe que implica as propriedades de várias classes, como uma solução nativa, eu recomendaria usar JavaScript/jQuery (jQuery não é realmente necessário, mas certamente útil)

Se você tem, por exemplo .umbrellaClass que "herda" de .baseClass1 e .baseClass2 você pode ter algum JavaScript que dispara pronto.

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

Agora todos os elementos de .umbrellaClass terão todas as propriedades de ambos .baseClassS. Note que, como a herança de OOP, .umbrellaClass pode ou não ter as suas próprias propriedades.

Infelizmente, o CSS não fornece 'herança' da mesma forma que linguagens de programação como C++, C# ou Java. Você não pode declarar uma classe CSS e depois estendê-la com outra classe CSS.

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

O CSS irá procurar todos os estilos que podem ser aplicados com base no que o seu formatação, e combinar os estilos CSS dessas múltiplas regras juntos.

Tipicamente, os estilos são fundidos, mas quando os conflitos surgem, o estilo declarado mais tarde vai geralmente ganhar (a menos que o !atributo importante é especificado em um dos estilos, em que caso que ganha). Além disso, os estilos aplicados diretamente a um elemento HTML têm precedência sobre os estilos de classe CSS.

Você pode aplicar mais de uma classe CSS a um elemento por algo como esta classe= "algo mais"

Há também o SASS, que você pode encontrar em http://sass-lang.com/. existe uma marca @extend, assim como um sistema de tipo mix-in. (Ruby)

A única coisa suportada no CSS é ser mais específica do que outra regra:

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

Um espaço com classe "myclass" terá ambas as propriedades.

Outra forma é especificando duas classes:

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

O estilo de "else" irá sobrepor (ou adicionar) o estilo de "algo"

composite.something, composite.else
{
    blblalba
}

Na verdade o que você está pedindo existe - no entanto é feito como módulos adicionais. Confira esta pergunta em Melhor CSS em. Net para exemplos.

Vê a resposta do Larsenal ao usar menos para ter uma ideia do que estes add-ons fazem.

O CSS não faz realmente o que estás a pedir. Se você quiser escrever regras com essa ideia composta em mente, você pode querer verificar bússola . É uma estrutura de stylesheet que parece semelhante ao já mencionado menos.

Para aqueles que não estão satisfeitos com os posts mencionados (excelentes), você pode usar suas habilidades de programação para fazer uma variável (PHP ou qualquer outro) e tê-lo armazenar os nomes de várias classes.

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

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

Depois aplicar a variável global ao elemento que deseja, em vez dos próprios nomes das classes

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

Em circunstâncias específicas podes fazer uma herança "suave":

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

Isto só funciona se você estiver adicionando o .classe composta para um elemento criança. É herança "suave" porque quaisquer valores não especificados em .o composto não é herdado, obviamente. Tenha em mente que ainda seriam menos personagens para simplesmente escrever "inline" e "vermelho"em vez de "herdar".

Aqui está uma lista de propriedades e se eles fazem ou não isto automaticamente: https://www.w3.org/TR/CSS21/propidx.html

Embora a herança directa não seja possível.

É possível usar uma classe (ou id) para uma etiqueta-mãe e, em seguida, usar combinadores CSS para alterar o comportamento de etiqueta-criança a partir da sua heirarquia.

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>

Se quiser um pré-processador de texto mais poderoso do que menos, veja o PPWizard:

Http://dennisbareis.com/ppwizard.htm

Você pode conseguir um comportamento como herança desta forma:

.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles

Ver http://jsfiddle.net/qj76455e/1/

A maior vantagem desta abordagem é a modularidade - você não cria dependências entre classes (como você faz quando "herda" uma classe usando um pré-processador). Assim, qualquer pedido de alteração em relação ao CSS não requer nenhuma análise de impacto.

Less and SAS are CSS pre-processors which extend CSS language in valuable ways. Apenas uma das muitas melhorias que eles oferecem é apenas a opção que você está procurando. Há algumas respostas muito boas com menos e eu vou adicionar solução Sass.

O SAS tem uma opção de extensão que permite que uma classe seja completamente estendida para outra. Mais informações sobre extend você pode ler neste artigo

Podes alcançar o que quiseres se pré-processares o teu .ficheiros css através do php. ...

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

...