Gruppierung von Selektoren

Bisher haben alle unsere Selektoren nur eine Klasse, eine ID oder ein Element ausgewählt. Mit CSS ist es jedoch lächerlich einfach, mehrere Elemente gleichzeitig als Ziel festzulegen, und Sie können dieselben Eigenschaften und Regeln für mehrere Elemente gleichzeitig angeben. Trennen Sie die Namen der Selektoren einfach durch ein Komma. Dies ist eine weitere Funktion von CSS, die eine bessere Wiederverwendbarkeit von Code ermöglicht. Es gibt keinen Grund, dieselben Eigenschaften für mehrere Elemente / Klassen anzugeben, wenn Sie sie wiederverwenden können. Hier ist ein gutes Beispiel:

<style type="text/css">
h1, h2, h3 {
	color: Maroon;
}
</style>

<h1>Main header</h1>

<h2>Header level 2</h2>

<h3>Header level 3</h3>

Wie Sie sehen, können wir jetzt h1-, h2- und h3-Elemente mit einer einzigen Regel als Ziel festlegen, anstatt sie für jede einzelne Regel angeben zu müssen. Sie können auch Klassen- und ID-Selektoren kombinieren, wenn Sie wollen:

h1#main, h2.sub, h3, .someClass, #anID {
	color: Maroon;
}

Das Coole ist nun, dass Sie dank CSS und seiner Kaskadierung immer noch Regeln hinzufügen können, die für ein oder mehrere Elemente spezifisch sind. Der Browser wendet diese Regeln entsprechend der Rangfolge an (mehr dazu später). Schauen Sie sich dieses Beispiel an:

<style type="text/css">
h1, h2, h3 {
	color: Maroon;
	text-align: center;
}

h1 {
	background-color: Silver;
	padding: 10px;
	text-align: left;
}

h2, h3 {
	background-color: Gray;
	padding: 5px;
}
</style>

<h1>Main header</h1>

<h2>Header level 2</h2>

<h3>Header level 3</h3>

Probieren Sie das Beispiel aus und beobachten Sie, wie der Browser die entsprechenden Eigenschaften der Selektoren verwendet. Wir können die gemeinsamen Eigenschaften in einem Selektor zusammenfassen und sie später in den spezifischeren Selektoren hinzufügen und sogar ändern.

Zusammenfassung

Durch das Gruppieren von Selektoren wird die Wiederverwendung von CSS-Code so einfach, dass ein hohes Maß an Flexibilität erhalten bleibt. Wenn eine gemeinsame Regel an mehreren Stellen verwendet wird, können Sie sie dennoch überschreiben, indem Sie einen spezifischeren Selektor schreiben.