adding multiple classes has no effect

adding multiple classes has no effect

style

  1. .blue 
  2. {
  3.   color: blue;
  4. }

  6. .red
  7. {
  8.   color: red;
  9. }

  11. .red.blue
  12. {
  13.   color: blue;
  14. }

  16. .blue.red
  17. {
  18.   color: red;
  19. }


  2. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  4. <p></p>

  6. <script>
  7. $('p').text('i can finally change color');
  8.         $('p').addClass('red blue');
  9. </script>

How come text is always red?