CSS: Set color to parent's background-color

Question

From the image below:

How would I make the text and icons inside the white boxes be the same color as the background of the big box?

Here is how the markup looks

<div class="class-item blue-bg">
  <!--Heading stuff-->
  <div class="class-item-actions">
    <span class="pick-up-icon">
      <i class="fa fa-female fa-lg"></i>
      <i class="fa fa-child"></i>
    </span>
    <span class="full-day-icon blue">AM / PM</span>
    <span class="unapproved-projects-icon blue">
     2&nbsp;<i class="fa fa-th-large fa-lg fa-fw class-item-action"></i>
    </span>
    <i class="fa fa-unlock fa-lg></i>
  </div>
</div>

So essentially, how can I make it so somehow I don't need to add the blue class to full-day-icon and unapproved-projects-iconand instead it inherits the blue color from class-item's background-color?

EDIT: Here is the relevant CSS

  .class-item {
    padding: 10px;
    width: 90%;
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

Answer 1

If it's okay for you to use CSS Variables, here is a neat and simple way to do this:

  .class-item {
    /** Specify the BG color in one place. **/
    --class-item-bg: #0076A5;
    padding: 10px;
    width: 90%;
    background-color: var(--class-item-bg);
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    color: var(--class-item-bg);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    color: var(--class-item-bg);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

You can check this fiddle to see how you can then use JavaScript to change the property so that it affects all the CSS rules where it is used.