Überschreiben Hintergrund-Farbe (CSS)

Question

Ich habe eine Eingabe, die zwei Klassen mit Hintergrundfarbe hat, die ich überschreiben muss. Ich versuche das zu tun: setze diese Eingabe in einen externen Container und (mit Java Script) werde ich die Klasse dieses Containers in die gewünschte ändern.

Die Eingabe hat zwei Klassen wie gesagt, und diese Klassen sind die, die ich ändern muss: irs-line und irs-bar. Diese beiden Klassen haben ihre eigenen Hintergrundfarben. Ich brauche sie auf rot und gelb. Ich werde den Klassenwechsel über Javascript mit dem Wert einiger Optionsfelder auslösen. (Das ist eine andere Geschichte)

Meine Frage ist, in irgendeinem Forum, geben ein Kerl mir diesen Hinweis:

.container.color-yellow .irs-line { 
    background-color: yellow; 
} 
.container.color-red .irs-line { 
    background-color: red; 
} 

Aber ich bin nicht sicher, wie es funktioniert oder wie soll ich diese Klassen in der Eingabe verwenden . Irgendeine Hilfe? (Ich würde zu diesem Kerl fragen, was er versucht, zu tun, aber ich kann nicht)

UPDATE:

Dies ist mein Code, wo ich den Eingang nennen:

<div className="uk-width-1-4"> 
    <input type="text" name="timewmsslider" ref="timewmsslider" /> 
</div> 

Es Reacjs ist, so Mit ref = "timewmsslider" wird die Eingabe mit ihren Standardklassen irs-bar und irs-line definiert.

Diese Eingabe wird mit den Standardklassen irc-line und irc-bar css generiert. Also, wie soll ich anrufen, wenn ich diese Klassen in der CSS habe (für beide Farben rot und gelb)?

.irs-line-yellow { 
    height: 16px; 
    top: 24px; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
    background: #e9d759; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e9d759 0%,#e9e459 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0); /* IE6-9 */ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    outline: 0!important; 
} 

.irs-bar-yellow { 
    height: 16px; 
    top: 24px; 
    margin-left: -7px; 
    padding-right: 5px; 
    background: #e9d759; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e9d759 0%,#e9d759 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0); /* IE6-9 */ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 0; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
} 

.irs-bar-red { 
    height: 16px; 
    top: 24px; 
    margin-left: -7px; 
    padding-right: 5px; 
    background: #e95959; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e95959', endColorstr='#e95959',GradientType=0); /* IE6-9 */ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 0; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
} 
.irs-line-red { 
    height: 16px; 
    top: 24px; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
    background: #e95959; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e95959', endColorstr='#e95959',GradientType=0); /* IE6-9 */ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    outline: 0!important; 
} 

Ich habe die Eingangsklassen mit diesen diejenigen auf externala Aktionen abhängig ändern (einige Radio-Buttons wird die Farbe der Balken- und Linien über Javascript ändern)

Standardfall: http://jsfiddle.net/h307fdau/ Red Fall: http://jsfiddle.net/mxt78oa5/

Answer 1

Unter Berücksichtigung Ihrer neuesten HTML & CSS Geige Änderungen, würde ich die folgende jQuery vorschlagen:

1.Keep dieser CSS-Klassen am besten, die ne zu isolieren eded background-color Eigenschaft, wie Sie in der gemeinsamen Geige in den Kommentaren haben:

.red {background-color: red;} 
.yellow {background-color: yellow;} 

2.Dieser jQuery wird hinzufügen oder Farbklassen entfernen & nach Radio input Auswahl aller Farben entfernen, wenn sie auf Schieber „Ist“ String-Wert entsprechen:

$range.on("change", function() { 
    //store slider & radio inputs values 
    var value = $(".js-range-slider").prop("value"); 
    var radioColor = $(".extra-controls input[type=radio]:checked").val(); 
    //if value matches actual remove colors 
    if (value == 'actual') { 
     $(".irs-line").removeClass(radioColor); 
     $(".irs-bar").removeClass(radioColor); 
     //prevent bottom line from coloring on slider actual date 
     $("#escenario-moderado").on("change", function() { 
      $(".irs-line").removeClass("yellow"); 
      $(".irs-bar").removeClass("yellow"); 
     }); 
     $("#escenario-severo").on("change", function() { 
      $(".irs-line").removeClass("red"); 
      $(".irs-bar").removeClass("red"); 
     }); 
    } 
    //else add the default radio input selected color 
    else { 
     $(".irs-line").addClass(radioColor); 
     $(".irs-bar").addClass(radioColor); 
     //add manually selected radio color 
     $("#escenario-moderado").on("change", function() { 
      $(".irs-bar").addClass("yellow"); 
      $(".irs-line").addClass("yellow"); 
      $(".irs-line").removeClass("red"); 
      $(".irs-bar").removeClass("red"); 
     }); 
     $("#escenario-severo").on("change", function() { 
      $(".irs-line").addClass("red"); 
      $(".irs-bar").addClass("red"); 
      $(".irs-bar").removeClass("yellow"); 
      $(".irs-line").removeClass("yellow"); 
     }); 
    } 
}); 

Working JSFiddle