CSS wildcard selection

Question

I use this wildcard in css to select the data containing "," commas.

td[data-content*=","]{
  background-color: yellow;
}

Is there a way to make a distinction for the numbers of "," in the data. I can highlight data containing one comma in yellow. I'd like to highlight data containing two commas in green. Is there a way to do this with CSS? Thanks.

I want to use different colors at the same time according to the number of commas data contains. So the data like (1,2) will be yellow. and the data like (1,2,3) will be green.

Answer 1

Here's a jQuery solution:

$('td').each(function() {
  var c = $(this).text();
  if (!c) return;
  var commas = c.split(",").length - 1;
  if (commas === 1) $(this).css("background-color", "yellow");
  if (commas === 2) $(this).css("background-color", "green");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a,b</td>
      <td>a,b,c</td>
    </tr>
  </tbody>
</table>

Should be pretty self-explanatory:

1. grab tds
2. read data-content attribute and count commas
3. set style