CSS: Eigenschaften vererben

[mcchaos]

Hallo!

Ich habe einige selbstdefineirte CSS-Eigenschaften, nur als Beispiel:

Code: Alles auswählen

.WarenkorbArtikel{ border-color:#FF0000;border-width:1px;border-style:solid;background-color:#00FF00;text-align:left;}
				         
.WarenkorbPreise{ border-color:#FF0000;border-width:1px;border-style:solid;background-color:#00FF00;text-align:right;}

Der Unterschied besteht also nur im text-align. Trotzdem müßte ich - wenn ich z.B. die border-color ändern möchte, dies in allen Klassen tun, was etwas mühsam und fehleranfällig ist.

Gibt es eine Möglichkeit, die Klasse WarenkorbPreise von WarenkorbArtikel "erben" zu lassen und dann nur den text-align neu zu setzen?

[Jörg]

du könntest statt zwei drei Klassen definieren

Code: Alles auswählen

.Warenkorb{ border-color:#FF0000;border-width:1px;border-style:solid;background-color:#00FF00;} 

.Artikel{ text-align:left;}
                      
.Preise{ text-align:right;}

und das dann z.B. so einbinden:

Code: Alles auswählen

<div class="Warenkorb Artikel"></div>
<div class="Warenkorb Preise"></div>

ich habs jetz allerdings nicht mehr im Kopf welche Browser mehrere Klassen pro Element unterstützern (NN4 jedenfalls nicht), müsste noch ausgetestet werden

edit:

2. Möglichkeit

wenn beide Elemente in einem übergeordneten Container liegen, kann man diesen als class="Warenkorb" klassifiziern

Code: Alles auswählen

<div class="Warenkorb">
<div class="Artikel"></div>
<div class="Preise"></div>
</div>

in der CSS-Datei muss dementsprechend stehen:

.Warenkorb div { border-color:#FF0000;border-width:1px;border-style:solid;background-color:#00FF00;}

.Artikel{ text-align:left;}

.Preise{ text-align:right;}