Vererbung von Klassen

[Jacques_Norris]

Hallo Zusammen,

folgendes Problem habe ich - entweder steh ich gerade auf dem Schlauch oder es funktioniert wirklich nicht, wie ich das will... Ich definiere im body-tag die Klasse mittels class="gruen", class="rot" oder class="blau" - es gibt also nur diese 3 Farben.

Jetzt würde ich gerne einige Elemente der Webseite in der entsprechenden Farbe einfärben - und meinem Verständnis nach sollte

h1.gruen {  
background-color:green;  
}  
h2.gruen {  
background-color:green;  
}  

nun auch funktionieren - da der Body ja schon die klasse hat. Leider wird das scheinbar nicht vererbt.
Kann man das sauber in CSS lösen?
Falls nicht gäbe es 2 Alternativen:

• entweder die Klasse manuell 10-20 mal pro Seite zuweisen oder
• je nach Farbe eine andere CSS einbinden.
  Beides sind aber Dinge, die ich eigentlich vermeiden möchte.
  Hab ich irgendwas falsch gemacht oder ist ein im body vergebenes Klassen-Attribut nicht in child-elementen verfügbar?
  Danke und viele Grüße
  Jacques_Norris

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Du kannst Kind-Elemente mit dem Kind-Kombinator selektieren:

.gruen > h1 {  
   /* Deine Definitionen */  
}

Das > ist in diesem Fall ein sogenannter Kombinator.

Für Nachfahren im Allgemeinen, also auch Enkel, Urenkel usw. gibt es den Nachfahren-Kombinator.

.gruen h1 {  
   /* Deine Defnitionen */  
}

Der Nachfahren-Kombinator ist einfach das Leerzeichen.

Man spricht allerdings in diesem Zusammenhang nicht von Vererbung, sondern einfach von Selektion. Mit Vererbung meint man Eigenschaften, die auf Nachfahren-Elemente übertragen werden. Viele Eigenschaften unterstützen den Wert "inherit", womit man dem Browser ausdrücklich mitteilt "übernimm bitte die Einstellung des Vorfahren". Für einige Elemente und Eigenschaften ist "inherit" zudem die Voreinstellung, sie werden also automatisch geerbet.

Mit h1.gruen selektierst du <h1>-Elemente, die gleichzeitig die Klasse "gruen" haben, also zum Beispiel sowas: <h1 class="gruen">Lorem Ipsum</h1>. Das ist vermutlich nicht das, was du erwartest hättest.

Kleiner Tipp am Rande: Heutzutage vermeidet man Klassennamen, die schon eine gewisse Präsentation suggerieren, wie .gruen, .rot oder .gelb. Stattdessen versucht man den Sinn hinter der unterschiedlichen Gestaltung zu konturieren und verwendet Klassenbezeichner, die Aufschluss über die Intention der Elemente geben. Zum Beispiel .warning, .error oder .notice.

[Gunther]

Hallo!

In Ergänzung zu 1UnitedPowers Beitrag hier noch der Link zum entsprechenden Abschnitt im Wiki:
http://wiki.selfhtml.org/wiki/CSS/Selektoren

Gruß
Gunther

[Jacques_Norris]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Voll und ganz!

Du kannst Kind-Elemente mit dem Kind-Kombinator selektieren:
Das > ist in diesem Fall ein sogenannter Kombinator.
Der Nachfahren-Kombinator ist einfach das Leerzeichen.

Danke - Diese Definiton habe ich gesucht!

Mit h1.gruen selektierst du <h1>-Elemente, die gleichzeitig die Klasse "gruen" haben, also zum Beispiel sowas: <h1 class="gruen">Lorem Ipsum</h1>. Das ist vermutlich nicht das, was du erwartest hättest.

Ja, das wäre halt Plan C gewesen (bzw. die aktuelle Lösung), allerdings doch leider recht aufwändig

Kleiner Tipp am Rande: Heutzutage vermeidet man Klassennamen, die schon eine gewisse Präsentation suggerieren, wie .gruen, .rot oder .gelb. Stattdessen versucht man den Sinn hinter der unterschiedlichen Gestaltung zu konturieren und verwendet Klassenbezeichner, die Aufschluss über die Intention der Elemente geben. Zum Beispiel .warning, .error oder .notice.

Dieses Beispiel der Farben war der Einfachheit des Beitrages geschuldet. Effektiv geht es um "Unterkategorien" der Webseite, welche farblich immer anders gestaltet werden sollen. Also
domain.de/kategorie1 -> Grünes Layout
domain.de/kategorie2 -> Rotes Layout
domain.de/kategorie3 -> Gelbes Layout
domain.de/unkategorisiert -> Farbneutrales (graues) Layout

[Gunnar Bittersmann]

@@Jacques_Norris:

nuqneH

Dieses Beispiel der Farben war der Einfachheit des Beitrages geschuldet. Effektiv geht es um "Unterkategorien" der Webseite, welche farblich immer anders gestaltet werden sollen.

Dann benenne die Klassen nach den Kategorien, nicht nach der (gegenwärtig!!) gewünschten Darstellung.

domain.de/kategorie1 -> Grünes Layout

Benutze bitte für Beispieldomains nicht sowas wie domain.de, sondern eine nach BCP 32 dafür vorgesehene, bspw. example.com

Qapla'

[Willli]

Ich definiere im body-tag die Klasse mittels class="gruen", class="rot" oder class="blau" - es gibt also nur diese 3 Farben.

Du scheinst da gerade auf dem falschen Dampfer unterwegs zu sein. CSS-Klassen haben nichts mit den Klassen zu tun, die du vermutlich von objektorientierter Programmierung kennst. Dementsprechend ist der Gedanke an das Konzept Vererbung hier fehl am Platze.

CSS-Klassen erben oder vererben nichts, eine CSS-Klasse ist eine statische Gruppe von CSS-Eigenschaften.

Mit dem class-Attribut HTML-seitig definierst im eigentlichen Sinne auch nichts, du gibst nur an, welche CSS-Klasse (oder -Klassen) für _dieses_ Element gelten soll, mithin, welche CSS-Eigenschaften für dieses Element gelten. Auch dort: Keine Vererbung, nur eine Zuweisung der CSS-Eigenschaften aller genannten CSS-Klassen.

Jetzt würde ich gerne einige Elemente der Webseite in der entsprechenden Farbe einfärben - und meinem Verständnis nach sollte
h1.gruen {
background-color:green;
}

nun auch funktionieren - da der Body ja schon die klasse hat. Leider wird das scheinbar nicht vererbt.

Es wird nichts vererbt, du kannst lediglich den Klassennamen in dem Pfad angeben, der den CSS-Selektor bildet:

Kann man das sauber in CSS lösen?

Soll ein H1-Element in einem anderen Element, dass die Klasse .gruen hat, einen grünen Hintergrund bekommen? Dann der schon vorgeschlagene Pfad ".gruen h1" (alle h1 innerhalb von .gruen-Elementen), ".gruen > h1" (nur direkte Kinder von .gruen-Elementen) und dergleichen.

[Gunnar Bittersmann]

@@Willli:

nuqneH

Du scheinst da gerade auf dem falschen Dampfer unterwegs zu sein.

Dito.

CSS-Klassen haben nichts mit den Klassen zu tun, die du vermutlich von objektorientierter Programmierung kennst.

Ganz einfach deshalb, weil es letztere gibt, CSS-Klassen gibt es jedoch nicht.

Mit dem class-Attribut HTML-seitig definierst im eigentlichen Sinne auch nichts, du gibst nur an, welche CSS-Klasse (oder -Klassen) für _dieses_ Element gelten soll

Falsch. Weder dienen Klassen ausschließlich zur Darstellung, noch kann (sollte!) man Darstellung ausschließlich über Klassen regeln.

Mit Klassen in HTML werden Elemente klassifiziert (klingt wie eine Binsenweisheit, allerdings hat die noch nicht alle erreicht) – und zwar vorzugsweise anhand ihrer Bedeutung. So gesehen sind Klassen eine Erweiterung von Elementen; es kann ja nicht für jede Bedeutung ein Element vefügbar sein.

welche CSS-Eigenschaften für dieses Element gelten. Auch dort: Keine Vererbung

Doch, bei CSS gibt es durchaus Vererbung. Manche Eigenschaften werden vererbt, andere nicht. Das lässt jeweils in der Spec nachlesen.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Willli!

Du scheinst da gerade auf dem falschen Dampfer unterwegs zu sein. CSS-Klassen haben nichts mit den Klassen zu tun, die du vermutlich von objektorientierter Programmierung kennst.

Genau. Es gibt nämlich keine CSS-Klassen.

Matthias

[Jacques_Norris]

Kann man das sauber in CSS lösen?
Soll ein H1-Element in einem anderen Element, dass die Klasse .gruen hat, einen grünen Hintergrund bekommen? Dann der schon vorgeschlagene Pfad ".gruen h1" (alle h1 innerhalb von .gruen-Elementen), ".gruen > h1" (nur direkte Kinder von .gruen-Elementen) und dergleichen.

Danke! Das habe ich gesucht!

Und: Ja, ich hatte fälschlicher Weise angenommen, dass bei

  
<parent class="klasse">  
   <child>Lorem Ipsum</child>  
</parent>  

<child> dann auch die Eigenschaften vom .klasse zugewiesen bekommt.

Aber ich habe ja jetzt die Lösung, nochmal vielen Dank!

[Auge]

Hallo

Und: Ja, ich hatte fälschlicher Weise angenommen, dass bei

<parent class="klasse">
   <child>Lorem Ipsum</child>
</parent>

> <child> dann auch die Eigenschaften vom .klasse zugewiesen bekommt.  
  
Wieso „fälschlicherweise“? `.klasse child`{:.language-css} leistet \*genau\* dies. Deine Konstruktion `child.klasse`{:.language-css} passte nur nicht zum tatsächlichen Aufbau.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)