Change color from specific csv line to the end of the line - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Change color from specific csv line to the end of the line

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

tr td {
   background-color: white;
}
tr:nth-child(n+10) td {
   background-color: green;
}
tr:nth-child(n+10) td:nth-child(3) {
   background-color: yellow;
}


      </style> 
 </head> <!-- w  w  w .  jav  a  2s . c  om-->
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td>red 1</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 2</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 3</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 4</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 5</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 6</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 7</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 8</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>red 9</td> 
     <td>green</td> 
     <td>2kg</td> 
     <td>13,45?</td> 
    </tr> 
    <tr> 
     <td>pink 10</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 11</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 12</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 13</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 14</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 15</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 16</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 17</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 18</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 19</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
    <tr> 
     <td>pink 20</td> 
     <td>white</td> 
     <td>7kg</td> 
     <td>22,90?</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials