Background Color Inheritance

by Kyle Mitofsky

HTML

<div class="color">
  A
  <div class="color">
    B
    <div class="color">
      C
    </div>
  </div>
</div>

<div class="color">
  A
  <div>
    B
      <div>
        C
      </div>
  </div>
</div>

<div style='position:fixed;bottom:0;left:0;background:lightgray;width:100%;padding:3px;'>
  About this question on SO
  <a href='https://stackoverflow.com/q/46336002/1366033'>
    How to get computed background color style inherited from parent element
  </a>
</div>

CSS

div {
  color: white;
  padding: 5px;
  margin: 5px;
  border: 1px solid grey;
  border-radius: 4px;
}
.color {
  background: rgba(61, 87, 194, 0.33);
}