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

[Rolf B]

Hallo Merlin,

Ich habe dazu schon die Selfhtml-Seite durchsucht

Soso. Hier wäre vermutlich ein Kind- oder Nachfahrenkombinator die Lösung.

D.h. wenn Du die Klasse so setzt:

<div class="v0 frei">
   <input...>
   <label ...>...</label>
   <label ...>...</label>
</div>

dann kannst Du die Labels mit

.v0 label {
   background-color: pink;
}

färben.

Aber Vorsicht mit diesem <small>-Dings, denn die dadurch reduzierte Fontsize verkleinert das ganze Element, so dass sich zwischen den beiden Labels ein Höhenversatz ergibt.

Das <small>-Element sollte übrigens kein <label> enthalten, denn dieses Label beschriftet nichts. <small> steht für einen nebengeordneten Kommentar ("das Kleingedruckte"). Wenn es Dir nicht um diese Semantik geht, dann verwende ein <span> Element. Für die kleinere Schriftgröße verwende CSS und setze font-size:smaller. HTML Elemente wählt man nach ihrer Bedeutung für den Inhalt aus, nicht danach, wie der Browser sie zufällig darstellt.

Du kannst mit einer CSS Regel wie

.v0 label, .v0 small, .v0 span {
   ...
}

alle Label-, Small- und Span-Elemente stylen, die Nachfahre eines Elements mit Klasse v0 sind (Selektorliste).

Die Hintergrundfarbe ist dann aber so eine Sache, denn durch die reduzierte font-size wird die Höhe des Elements kleiner und damit auch der gefärbte Hintergrundbereich. Wenn das für Dich passt, ist es ok. Wenn nicht, müsstest Du um beide Elemente ein div legen und dem div die Hintergrundfarbe geben:

<div class="v0 frei">
   <input id="foo"...>
   <div>
     <label for="foo" ...>...</label>
     <small ...>...</small>
   </div>
</div>

.v0 > div {
  display: inline-block;   /* Damit es im Zeilenfluss bleibt */
  background-color: pink;
}

Ist blöd, weil es ein Element ist das man nur für die Färbung einfügt, aber nur mit zwei Inline-Elementen geht es nicht, weil die Boxen wegen der Baseline-Ausrichtung nicht auf der gleichen Höhe sind (was man für einen konkreten Font hinfummeln könnte, aber Fonts sind nie da, wenn man sie braucht).

Ob v0, v15 oder v45 hier die richtigen Klassennamen sind, musst Du wissen. Wenn das fachliche Begriffe bei Dir sind, sind sie OK. Aber wenn sie nur als Farbkennung dienen, dann überlege noch mal. Welcher fachliche Sachverhalt steckt hinter der Farbgebung? Klassen sollen Fachlichkeit darstellen, keine technische Steuerung.

Rolf