Dynamically change CSS rules in JavaScript or jQuery

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 class and div attributes inside. I want to change one of the rules with JavaScript or jQuery.

Here is an example :

.red{
    color:red;
}

So the idea is to do something in JavaScript and the HTML knows that now the color is another color like this:

.red{
    color:purple;
}

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 span with the CSS class .red, the text has to be purple and not red.

I hope I made it clear.