Antwort an „Merlin S“ verfassen

Farbe für alle Kind-Elemente, aber nicht beim Eltern-Element gilt.

Merlin S 30.03.2024 15:19 (Versionen)

Hallo!

Ich möchte in einem HTML eine Hintergrundfarbe für alle Label-Elemente, die in einem div-Element gruppiert sind, ohne dass das div selber diese Hintergrundfarbe hat. Hier einmal der Code (gekürzt):

<!DOCTYPE html>
<html lang="de">
	<body>
	<main>
		<form>
			<fieldset>
				<legend>&#160; FAHRZEUGE &#160;</legend>
				<div class="out">
					<div class="frei">
						<input type="checkbox" id="mtf" class="fz">
						<label class="v0 FzName" for="mtf">MTF</label>
						<small><label class="v0 ArV"></label></small>
					</div>
					<div class="frei">
						<input type="checkbox" id="mzf" class="fz">
						<label class="v0 FzName" for="mzf">MZF</label>
						<small><label class="v0 ArV"></label></small>
					</div>
					<div class="frei">
						<input type="checkbox" id="hlf" class="fz">
						<label class="v3 FzName" for="hlf">HLF</label>
						<small><label class="v3 ArV"></label></small>
					</div>
					<div class="frei">
						<input type="checkbox" id="tlf" class="fz">
						<label class="v15 FzName" for="tlf">TLF</label>
						<small><label class="v15 ArV"></label></small>
					</div>
					<div class="frei">
						<input type="checkbox" id="blf" class="fz">
						<label class="v45 FzName" for="blf">BLF</label>
						<small><label class="v45 ArV"></label></small>
					</div>
					<div class="frei">
						<input type="checkbox" id="rf0" class="fz">
						<label class="v15 FzName" for="rf0">RF</label>
						<small><label class="v15 ArV"></label></small>
					</div>
				</div>
			</fieldset>
		</form>
	</main>
	</body>
</html>

@media all			{
	.out, .frei, .einsatz			{ display: inline-block; }
	input.fz						{ display: none; }
	label.v0						{ font-size: 1.05em; }
}
@media screen		{
	input:checked + label + label {
		outline: thin outset DeepSkyBlue;
		font-weight: bold;
		background-color: red;
	}
	div.einsatz			{
		padding: 0.3em 0.2em;
		color: white;
		background-color: orange;
	}
	.FzNr, .FzName, .ArV {
	padding: 0em 0.2em;
	border: solid thin;
	}
	div.frei						{ padding: 0.07em 0.3em; }
	.v0								{ background-color: #0D0; }
	.v0.ArV::before					{ content: "  "; }
	.v3								{ background-color: #EE0; }
	.v3.ArV::before					{ content: "V3"; }
	.v15							{ background-color: #F55; }
	.v15.ArV::before				{ content: "1"; }
	.v45							{ display: none; }
}

Derzeit ist es so, dass die Hintergrundfarbe der Labels einzeln über die v-Nummer gesteuert wird. Wenn ich zum Beispiel das MTF von grün auf gelb machen möchte, dann muss ich bei jedem Label (es sind in echt mehr als nur die zwei hier) einzeln die Klasse von v0 auf v3 ändern.

Ist es aber irgendwie möglich, dass ich den übergeordneten Divs v-Nummern gebe (z.B. <div class="v3 frei">) und so eine Hintergrundfarbe für alle in dem div eingeschlossenen Labels festlege, ohne dass das div selbst diese Farbe annimmt? (die Hintergrundfarbe des Divs steuere ich durch ändern der Klasse zwischen "frei" und "einsatz").

Ich habe dazu schon die Selfhtml-Seite durchsucht und auch gegoogelt, jedoch nichts gefunden. Kann mir bitte jemand da helfen? Vielen Dank!

Liebe Grüße

Merlin

aus Wien