javascript - How to force an update of a css selector inside context? -

let's have css code:

.context-1 .test {   background-color: #ff0000; }  .context-2 .test {   background-color: #00ff00; }  .context-3 .test {   background-color: #0000ff; }  <div class="context-1">     <div class="test">         hello, world!     </div> </div> 

works great. if i'm trying switch .context-1 .context-2 - div.test doesn't update it's background-color.

why background color not update?

i added complete source code of such case, here is:

<script>    var xs = [-infinity, 768];  var sm = [768, 992];  var md = [992, 1200];  var lg = [1200, infinity];    var width;    $(window).resize(function() {  	width = $(this).width();   	mediaquery(xs, sm, md, lg);  });    function mediaquery(xs, sm, md, lg)  {      if (width >= xs[0] && width < xs[1]) {          console.log("xs");          hide_xs();      }        if (width >= sm[0] && width < sm[1]) {          console.log("sm");          hide_sm();      }        if (width >= md[0] && width < md[1]) {          console.log("md");          hide_md();      }        if (width >= lg[0] && width < lg[1]) {          console.log("lg");          hide_lg();      }  }    function hide_sm() {      $('#row').removeclass().addclass('xs');  }    function hide_sm() {      $('#row').removeclass().addclass('sm');  }    function hide_sm() {      $('#row').removeclass().addclass('md');  }  function hide_lg() {      $('#row').removeclass().addclass('lg');  }  </script>

<style>  .xs .test {    background-color: #ff0000;  }    .sm .test {    background-color: #00ff00;  }    .md .test {    background-color: #0000ff;  }    .lg .test {    background-color: #ff00ff;  }  </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="row" class="xs">  	<div class="test">  		hello, world!  	</div>  </div>

i created jsfiddle , code works. difference how information logged.

function consolelog(message){     var element = $("#log");     element.append(message); }