Vererbung von Klassen

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