title: Change text color of a table row based on cell content, Using Css Only
body: <p>I was given two files, HTML and CSS, and i have to change some table rows "text color" based on cell content in the HTML file. But the problem is that i have to change ONLY the Css file (Without touching the HTML file) to achieve that. Can anywone please help me, i would be very grateful.</p>
  
  <p>The documents below are consecuitevly CSS file, HTML file, The image of the output to be achieved (link)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, div, h1, form, fieldset, input, textarea {
   margin: 0; padding: 0; border: 0; outline: none;
  }
  
  table {
    margin: 1; 
    padding: 0; 
    border: 1px; 
    outline: none;
    background:#FFF;
    border-style:solid;
    border-color:#AAA;
    position: relative;
    top: 200px;
  }
  
  th {
    background:gray;
  }
  
  td {
    border-color:#AAA;
  }
  
  body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color:#000000;
    position:relative;
    background:#D2D9DD
  }
  
  .panel {
  }
  
  .panelHeader {
  }
  
  .panelContent {
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt; 
  &lt;div align="center"&gt;
    &lt;table id="allData"&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
         &lt;th&gt;Number&lt;/th&gt;
         &lt;th&gt;Name&lt;/th&gt;
         &lt;th&gt;Value&lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;1.&lt;/th&gt;
         &lt;td&gt;Name 1&lt;/td&gt;
         &lt;td&gt;Value 1&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;2.&lt;/th&gt;
         &lt;td&gt;Name 2&lt;/td&gt;
         &lt;td&gt;Value 2&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;100.&lt;/th&gt;
         &lt;td&gt;Name 100&lt;/td&gt;
         &lt;td&gt;Value 100&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;1.&lt;/th&gt;
         &lt;td&gt;Name 1&lt;/td&gt;
         &lt;td&gt;Value 1&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;2.&lt;/th&gt;
         &lt;td&gt;Name 2&lt;/td&gt;
         &lt;td&gt;Value 2&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;100.&lt;/th&gt;
         &lt;td&gt;Name 100&lt;/td&gt;
         &lt;td&gt;Value 100&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;1.&lt;/th&gt;
         &lt;td&gt;Name 1&lt;/td&gt;
         &lt;td&gt;Value 1&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;2.&lt;/th&gt;
         &lt;td&gt;Name 2&lt;/td&gt;
         &lt;td&gt;Value 2&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;100.&lt;/th&gt;
         &lt;td&gt;Name 100&lt;/td&gt;
         &lt;td&gt;Value 100&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;1.&lt;/th&gt;
         &lt;td&gt;Name 1&lt;/td&gt;
         &lt;td&gt;Value 1&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;2.&lt;/th&gt;
         &lt;td&gt;Name 2&lt;/td&gt;
         &lt;td&gt;Value 2&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;100.&lt;/th&gt;
         &lt;td&gt;Name 100&lt;/td&gt;
         &lt;td&gt;Value 100&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;1.&lt;/th&gt;
         &lt;td&gt;Name 1&lt;/td&gt;
         &lt;td&gt;Value 1&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;2.&lt;/th&gt;
         &lt;td&gt;Name 2&lt;/td&gt;
         &lt;td&gt;Value 2&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;100.&lt;/th&gt;
         &lt;td&gt;Name 100&lt;/td&gt;
         &lt;td&gt;Value 100&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and finally <strong>The result should be like this :</strong></p>
  
  <p>===> <a href="http://i.stack.imgur.com/6FTgY.png" rel="nofollow">link : Click here to see image result </a> &lt;===</p>