title: Dynamically change CSS rules in JavaScript or jQuery
body: <p>I'm looking for a way to change the CSS rules of my stylesheet imported in the document. So I have an external stylesheet and some <code>class</code> and <code>div</code> attributes inside. I want to change one of the rules with JavaScript or jQuery.</p>
  
  <p>Here is an example :</p>
  
  <pre><code>.red{
      color:red;
  }
  </code></pre>
  
  <p>So the idea is to do something in JavaScript and the HTML knows that now the <code>color</code> is another color like this:</p>
  
  <pre><code>.red{
      color:purple;
  }
  </code></pre>
  
  <p>But I want to have this rule for every element that I add in the future by the way of append. So if I add a <code>span</code> with the CSS class <code>.red</code>, the text has to be purple and not red.</p>
  
  <p>I hope I made it clear.</p>