title: Styling a CSS item depending on it's value
body: <p>I have a list of percentages that range from 0% through to 200%.</p>
  
  <p>Is there a way to style those numbers depending on their value i.e. make numbers 0% - 100% be green and numbers 101% > red?</p>
  
  <p>Please note, I don't have access to the HTML for this, just CSS.</p>
  
  <p>Thanks in advance,</p>
  
  <p>Tom Perkins</p>
  
  <p>Edit:</p>
  
  <p>The HTML in question reads:</p>
  
  <pre><code>    &lt;td class="HtmlGridCell" colspan="5" align="Left"&gt; &lt;/td&gt;
      &lt;td class="HtmlGridCell" colspan="2" align="Left"&gt;&lt;span class="progress" title="303%"&gt;&lt;span class="indicator warning" style="width: 100%;"&gt; &lt;/span&gt;&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>And the CSS reads:</p>
  
  <pre><code>@-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") {
  .progress:after {
  content: attr(title);
  font-size: 14px;
  position: relative;
  left: 122px;
  top: -27px;
  float: left;
  color: #666;
  background-color: #efefef;
  -moz-border-radius: 4px;
  padding: 5px;
  border: 1px solid #cfcfcf;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  }
  </code></pre>
  
  <p>Hope that helps.</p>