[eclere]

Hallo,

mich würde interessieren ob es eine Vererbung wie in der objektorientierten Programmierung gibt, also zum Beispiel diese Boxen welche gerne in Webseiten eingesetzt werden.
Nun, meine CSS Klasse heisst .box. Mal angenommen ich habe nun eine einzige Box die ich aber anders darstellen möchte, jedoch immer noch die Klasse Box sein soll.

Ich kenne ja die Syntax nicht, aber vielleicht kann ich es so verdeutlichen:

.box
{
  background-color:#cccccc;
}

.neuebox :.box
{
   background-color:#ffffff;
}

Ein anderes Beispiel wären alternierente Listenelemente. Wenn hier zb. nur die Hintergrundfarbe geändert werden soll, wäre es doch schön wenn ich nicht gleich die komplette Klasse zwei mal definieren müsste.

Ich hätte also gerne eine Vererbung die sich aus der CSS definition ergibt, nicht aus der entgültigen Positionierung auf der Webseite.

Falls es geht, gibts da Schwierigkeiten mit den verschiedenen Browsern?

gruß

[BoneMasterNo1]

Das ergibt irgendwie keinen Sinn...
oder ich hab irgendwie nicht so ganz verstanden für was du das brauchst bzw für was das gut sein soll?

[goetzi]

Wenn du eine einzige Box hast, die anders sein soll, dann gib ihr eine id. Die CSS-Angaben der id gelten dann vor denen der class.

[Doik]

css vererbung läuft analog zur Hierarchie des Dokuments.
bessere erklärung weil Doik dezent alkoholisiert
so long
Doik

[aNtiCHrist]

Lass das Leerzeichen und den Doppelpunkt zwischen .neuebox und .box weg, dann passt das. Siehe http://jendryschik.de/wsdev/einfuehr...lwerte-kaskade und http://www.w3.org/TR/CSS21/selector.html#class-html. In dem class-Attribut muss es dann neuebox box lauten.

Falls es geht, gibts da Schwierigkeiten mit den verschiedenen Browsern?

Der IE machsts natürlich wieder falsch und interperetiert den Selektor .neuebox.box dann genau so wie .box, es wird nur der letzte Klassenname interpretiert. Als Workaround fällt mir auch nur ein, mit IDs oder anderen Selektoren höherer Spezifizität zu arbeiten. Alternativ könnte man dem IE per Conditional Comment eine zusätzliche komplette Definition für die Klasse unterschieben. So bleibt wenigstens für moderne Browser der Code schlank.

[Dexter]

Zitat von aNtiCHrist 

Der IE machsts natürlich wieder falsch und interperetiert den Selektor .neuebox.box dann genau so wie .box, es wird nur der letzte Klassenname interpretiert. Als Workaround fällt mir auch nur ein, mit IDs oder anderen Selektoren höherer Spezifizität zu arbeiten.

Mhh? Warum einfach machen, wenn's auch umständlich geht, oder versteh ich Dich grad nicht richtig?
Wie man vernünftig vererbt oder Styles vergibt, hängt meist auch ein wenig vom HTML-Code ab, ich hab jetzt aus meiner Konfusion mal ein Testcase gebaut:

.box {
	font-family: Georgia, "Times New Roman", Times, serif;
	background: #3ff;
}
.neuebox {
	background: #960;
}
...
<p class="box">Box</p>
<p class="box neuebox">Box + Neuebox</p>

Warum nicht so einfach?

[aNtiCHrist]

Ok, wenn man die Reihenfolge beachtet, kann man auch einen Selektor gleicher Spezifität verwenden. Da muss man dann halt ein bisschen aufpassen, dass man das nicht mal irgendwie versehentlich vertauscht. Davon abgesehen ist das natürlich deutlich einfacher.

[eclere]

Hallo,

danke für die Antworten.

Das hier:

<p class="box">Box</p>
<p class="box neuebox">Box + Neuebox</p>

find ich spitze. Ich konnte es zwar noch nicht testen, aber es sieht schon mal sehr einfach zu lesen aus.

gruß