CSS：下の画像から、親の背景色

Question

に設定色：

は、どのように私は白いボックス内のテキストとアイコンが大きな箱の背景と同じ色になるだろうか？ここで

マークアップだから、基本的に

<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> 

をどのように見えるかで、どのように私はそれはそう何とか私はfull-day-iconとunapproved-projects-iconにblueクラスを追加する必要はありませんし、代わりにそれはclass-itemから青色を継承することができますのbackground-color？

編集：ここでは、関連する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

あなたがCSS Variablesを使用することが大丈夫なら、ここでこれを行うにはきちんとして簡単な方法です：

.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; 
    } 

あなたはどのように見てthis fiddleを確認することができますJavaScriptを使用してプロパティを変更し、使用されているすべてのCSSルールに影響を与えることができます。

Answer 2

あなたはCSSに異なる特性を継承することはできませんです。だから、子供のdivはの子の親のbackground-colorを継承することができないでしょう。colorのプロパティです。

.parent { 
    background-color: red; 
} 
.child { 
    color: inherit-background-color /* Not a way to do this without a preprocessor */ 
} 

なぜスタイルを直接適用しないのですか？

.full-day-icon { 
    color: #0076A5; 
    } 

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

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

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

<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>