How does the order of selectors depend on? The transition does not work if you put the transition class first https://jsfiddle.net/7u5z943r/ What is the difference? After all, the browser remembers the entire stream entirely.

$(document).ready(function(){ $('div').click(function(){ $('.q').toggleClass('q1'); }); }); 
 .q1{ background: red; } .q{ width: 200px; height: 200px; background: black; transition: all 1s; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q"></div>

  • CSS - Cascading Style Sheets - soledar10

2 answers 2

Just the same, the order of defining styles is the key. The properties of the style written below (after) overlap the properties of the style written above (before).

 $(document).ready(function(){ $('div').click(function(){ $('.q').toggleClass('q1'); }); }); 
 .q{ width: 200px; height: 200px; background: black; transition: all 1s; } .q1{ background: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q"></div>

  • Simple cascading is obtained? - PeGaS
  • @PeGaS, yes, sobssno, as the name says - Cascading Style Sheets - SLy_huh

As written above in this case, the order is decisive, it’s understandable, the browser needs to choose a single style, but for such a task you can also specify a style for an element that has both .q.q1 classes, then this style will be decisive , not order.

 $(document).ready(function(){ $('div').click(function(){ $('.q').toggleClass('q1'); }); }); 
 .q.q1{ background: red; } .q{ width: 200px; height: 200px; background: black; transition: all 1s; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q"></div>