title: CSS: Set color to parent's background-color
body: <p>From the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/FwxAn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FwxAn.png" alt="enter image description here"></a></p>
  
  <p>How would I make the text and icons inside the white boxes be the same color as the background of the big box?</p>
  
  <p>Here is how the markup looks</p>
  
  <pre><code>&lt;div class="class-item blue-bg"&gt;
    &lt;!--Heading stuff--&gt;
    &lt;div class="class-item-actions"&gt;
      &lt;span class="pick-up-icon"&gt;
        &lt;i class="fa fa-female fa-lg"&gt;&lt;/i&gt;
        &lt;i class="fa fa-child"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;span class="full-day-icon blue"&gt;AM / PM&lt;/span&gt;
      &lt;span class="unapproved-projects-icon blue"&gt;
       2&amp;nbsp;&lt;i class="fa fa-th-large fa-lg fa-fw class-item-action"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;i class="fa fa-unlock fa-lg&gt;&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So essentially, how can I make it so somehow I don't need to add the <code>blue</code> class to <code>full-day-icon</code> and <code>unapproved-projects-icon</code>and instead it inherits the blue color from <code>class-item</code>'s <code>background-color</code>?</p>
  
  <p>EDIT: Here is the relevant CSS</p>
  
  <pre><code>  .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;
    }
  </code></pre>