Arv i css

Vet inte om det är vad du är ute efter men du kan göra så här:

CSS:

.stor_text {
 font-size: 200%;
}

.rosa_text {
 color: #F0F;
}

HTML:

<p class="stor_text">Stor text</p>
<p class="rosa_text">Rosa text</p>
<p class="stor_text rosa_text">Stor OCH rosa text</p>

Nja... jag hade snarare tänkt mig att alla attribut som finns i klassen .menubutton skall ärvas till den nya klassen/klasserna.

Anledningen till att jag vill göra det, är att jag vill slippa skriva alla attribut en gång till i klassen. Inte för att det är jobbigt, men för att css-filen skall bli mindre och för att alla klasserna skall bli mer "dynamiska". D.v.s. ändrar jag i superklassen (som alla subklasser ärver från) så skall förändringarna slå igenom i alla subklasser.

Jag hade tänkt mig något liknande:

.newbutton extends menubutton {
color:#00000;
}

Klassen .newbutton får nu alla attribut som menubutton, men får svart textfärg istället, som enda skillnad. (Lånade in lite java-syntax, men ni förstår säkert hur jag menar. :) )

Jag tyckte att det skulle bli en bra lösning, men klasser kanske inte fungerar på samma sätt i CSS som i objektorienterade språk??

Skapar detta inte ungefär vad du är ute efter?

<style>
.buttoncl {
 background:yellow;color:black;
}

#newbutton {
 color: #F0F;
}
</style>

<button class="buttoncl">Menyknapp</button>
<button id="newbutton" class="buttoncl">Ny knapp</button>

andreascarlsson skrev:

Nja... jag hade snarare tänkt mig att alla attribut som finns i klassen .menubutton skall ärvas till den nya klassen/klasserna.

Anledningen till att jag vill göra det, är att jag vill slippa skriva alla attribut en gång till i klassen.

Det är ju precis det Web-Tors lösning gör, du behöver ite skriva alla attribut en gång till, den kommer att applicera din gamla klass + den nya.

Hmm...
Med en effektiv användning av "cascading" i CSS (dvs om du utnyttjar möjligheten att "dela upp" dina deklarationer i flera på varandra följande stilregler även för en och samma klass eller en och samma tagg) så kommer du ganska nära ditt lite mer "objektiga" sätt att tänka... Trots bristen på möjlighet att "subklassa" i CSS

Exempel
Jag brukar köra nånting i stil med det här när jag vill "subklassa" i CSS:

/* Först deklarerar man allt gemensamt grundutseende 
    för alla klasser/subklasser som hör ihop */
.menubutton, 
.newbutton,
.stupidbutton {
  width:105px;
  height:18px;
  text-align:center;
  font-size:11px; 
  font-weight:bold;
  color:#314173;
  background-color:#8998BE;
  cursor:pointer;
}

/* Sedan bygger man ut "subklasserna" en efter en...
.newbutton {
   color:#00000;
}
.stupidbutton {
   color:red; 
   background-color:green;
}

Senast deklarerade värde gäller! ;)
På så sätt kan man köra med HTML-kod typ:

<button class="menubutton">Menyknapp</button>
<button class="newbutton">Ny knapp</button>
<button class="stupidbutton">Dum knapp</button>

dvs en klass per tagg (om man vill ;) )

Tack!!

Det var ungefär det jag var ute efter!! Det är iochförsig inga riktiga arv, men det fungerar för mina syften! :)

Någon som vet om en riktig arvsfunktionalitet kommer att implementeras i kommande versioner av css?? (typ som det fungerar i java, c++, etc)??