span background according to data value

Question

I have a span class cor (color):

<span class="cor" data-c="red">red</span>
<span class="cor" data-c="green">green</span>
<span class="cor" data-c="blue">blue</span>

and cor style:

.cor{
 padding:5px;
 margin:5px;
}

What I want is the .cor background-color to be the color of the data-c element value. Can I style the .cor background based on the data-c value?

edit-------

it is not working:

 background-color: attr(data-c);

Answer 1

You can do this with JQuery

$('.cor').each(function() {
  var color = $(this).data('c');
  $(this).css('background-color', color);
});

.cor{
   padding:5px;
   margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cor" data-c="red">red</span>
<span class="cor" data-c="green">green</span>
<span class="cor" data-c="blue">blue</span>