title: Styling CSS of Programmatically created classes
body: <p>Another component in my site creates span's with the class HighlightCOLOR where COLOR is any html color.</p>
  
  <p>I then need to style the css the make the span that color.  I can do this obviously by creating css classes for each color and then style the background color the named color.  For example:</p>
  
  <pre><code>.HighlightMagenta
      {
          background-color:magenta;
      }
  </code></pre>
  
  <p>Is there a more elegant solution that simply writing css for each possible color?</p>
  
  <p>Note: I can't change the structure described above. Its relevant for too many other things and the inelegant solution works well enough not not warrant a rebuild. I am happy to use javascript solutions, but would prefer a pure CSS solution. I don't do Jquery.</p>
  
  <p><strong>To clarify based on questions below:</strong></p>
  
  <p>The issue is that my html is being populated with unstyled spans of unknown (but predictable) class names.  The class names are in the format HighlightColor where Color is an html color.  I then need to style these classes with css that corresponds to the color named in the class title.</p>