<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<style>
.WBS1{font-weight:bold; text-transform:uppercase; font-size: 16px; background-color:#1a237e; color:whitesmoke}
</style>
 
<meta charset="utf-8">
<title>Conditional CSS</title>
</head>
<body>

<div>
<table width="80%" border="0" cellpadding="0" class="table3">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td><p data-color="0">MWBS SIZE 16</p>  </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><p data-color="10">WBS ELEMENT SIZE 14</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><p data-color="20">WBS ELEMENT SIZE 12</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td> <p data-color="30">WBS ELEMENT SIZE 12</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td> <p data-color="40">WBS ELEMENT SIZE 12</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><p data-color="50">ITEM ACTIVITY SIZE 10</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><p data-color="60">SUB-ITEM/ ACTIVITY SIZE 10</p></td>
    </tr>
  </tbody>
</table>
</div>


<script> 
 $(document).ready(function(){
  
  var mc = {
    '0-0'     : 'WBS1',
    '1-10'    : 'WBS2',
	  '11-20'     : 'WBS3',
    '21-30'    : 'WBS4',
	  '31-40'     : 'WBS5',
    '41-50'    : 'WBS6',
    '51-60'   : 'WBS7'
  };
  
function between(x, min, max) {
  return x >= min && x <= max;
}
  

  
  var dc;
  var first; 
  var second;
  var th;
  
  $('p').each(function(index){
    
    th = $(this);
    
    dc = parseInt($(this).attr('data-color'),10);
    
    
      $.each(mc, function(name, value){
        
        
        first = parseInt(name.split('-')[0],10);
        second = parseInt(name.split('-')[1],10);
        
        console.log(between(dc, first, second));
        
        if( between(dc, first, second) ){
          th.addClass(value);
        }

    
    
      });
    
  });
});
</script>

</body>
</html>