0

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.

The documents below are consecuitevly CSS file, HTML file, The image of the output to be achieved (link)

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 {
}
<html>
<body> 
<div align="center">
  <table id="allData">
   <tbody>
     <tr>
       <th>Number</th>
       <th>Name</th>
       <th>Value</th>
     </tr>
     <tr>
       <th>1.</th>
       <td>Name 1</td>
       <td>Value 1</td>
     </tr>
     <tr>
       <th>2.</th>
       <td>Name 2</td>
       <td>Value 2</td>
     </tr>
     <tr>
       <th>100.</th>
       <td>Name 100</td>
       <td>Value 100</td>
     </tr>
     <tr>
       <th>1.</th>
       <td>Name 1</td>
       <td>Value 1</td>
     </tr>
     <tr>
       <th>2.</th>
       <td>Name 2</td>
       <td>Value 2</td>
     </tr>
     <tr>
       <th>100.</th>
       <td>Name 100</td>
       <td>Value 100</td>
     </tr>
     <tr>
       <th>1.</th>
       <td>Name 1</td>
       <td>Value 1</td>
     </tr>
     <tr>
       <th>2.</th>
       <td>Name 2</td>
       <td>Value 2</td>
     </tr>
     <tr>
       <th>100.</th>
       <td>Name 100</td>
       <td>Value 100</td>
     </tr>
     <tr>
       <th>1.</th>
       <td>Name 1</td>
       <td>Value 1</td>
     </tr>
     <tr>
       <th>2.</th>
       <td>Name 2</td>
       <td>Value 2</td>
     </tr>
     <tr>
       <th>100.</th>
       <td>Name 100</td>
       <td>Value 100</td>
     </tr>
     <tr>
       <th>1.</th>
       <td>Name 1</td>
       <td>Value 1</td>
     </tr>
     <tr>
       <th>2.</th>
       <td>Name 2</td>
       <td>Value 2</td>
     </tr>
     <tr>
       <th>100.</th>
       <td>Name 100</td>
       <td>Value 100</td>
     </tr>
   </tbody>
 </table>
</div>
</body>
</html>

and finally The result should be like this :

===> link : Click here to see image result <===

Zakaria Jaadi
  • 79
  • 1
  • 10

1 Answers1

1

Using Css Only

Short answer: You can't. CSS can't read the content of your element.

Nick
  • 3,231
  • 2
  • 28
  • 50