I need to change Div Eliment's color according to the text

Question

I want to change the span color according to the contents inside the span tag for example red, green, blue, yellow, I could not use nth-child nor inline class. due to cms restriction. I hope it could be possible with only css, if not possible then what is the appropriate method?

Thanks in advance

.selected-color span.value{
    color:grey;
}

.selected-color .value{
      color:grey; /*default color*/
}

<div class="selected-color">
    <div class="value">red</div>
    <div class="value">green</div>
    <div class="value">blue</div>
    <div class="value">yellow</div>
</div>

Answer 1

Iterate the elements with .each() in jquery and take current object $(this) and apply css color for all elements through jquery

$(".selected-color .value ").each(function() {

      var value=  $(this).text();
      $(this).css("color", value);
});

Fiddle

Answer 2

You can achieve this with jQuery. Iterate over .value elements, get each text value and assign ass css property color

$('.value').each(function () {
  var val = $(this).text();
  $(this).css({'color':val});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selected-color">
        <div class="value">red</div>
        <div class="value">green</div>
        <div class="value">blue</div>
        <div class="value">yellow</div>
    </div>