cssの不透明度が兄弟の不透明度に影響する

Question

[編集：この質問を作成する際の間違いのため、JavaScriptベースのオリジナル、この質問は廃止されました。]

私は、さまざまな製品と複数のバージョンの最新のビルド状態のマトリックスを示すHTMLページを用意しています。

この行列では、古いビルドは、opacity: .5に追加のスタイルクラス"stale"を割り当てて設定することで、フェードアウトされます。
このマトリックスは、実行されたテストの結果も示しています。テスト結果要素はビルド要素の兄弟であり、ビルド要素の一部をオーバーレイします。

しかし、私の問題は、 'build'要素がフェードアウトした場合、 'test'要素もフェードアウトされることです。まず第一に、私がなぜ「テスト」の結果を透明にしたくないのかを理解したいと思います。

table { border: 1px solid darkgrey; } 
 
td { border: 1px solid darkgrey; overflow: hidden; } 
 
div { text-align: center; } 
 
.build { 
 
    border: solid black 1px; 
 
    width: 10em; 
 
    margin: 0.2em; 
 
    padding: 0.2em; 
 
    font-size: 1.0em; 
 
} 
 
.test { 
 
    float: right; 
 
    border: solid lightgrey 1px; 
 
    width: 3em; 
 
    margin-top: -0.8em; 
 
    margin-right: -0.4em; 
 
    // opacity: .99;  // workaround 
 
} 
 
.fail { background-color: rgb(255, 150, 150); } 
 
.ok { background-color: rgb(170, 255, 170); } 
 
.red { background-color: rgb(255, 150, 150); } 
 
.green { background-color: rgb(150, 255, 150); } 
 
.stale { opacity: .5; }

<table> 
 
    <tr> 
 
    <th>Version</th> 
 
    <th>Product A</th> 
 
    <th>Product B</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1.1</td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test green">100%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test red">98%</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.0</td> 
 
    <td> 
 
     <div class="build ok stale">success</div> 
 
     <div class="test red">99%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build fail stale">failure</div> 
 
    </td> 
 
    </tr> 
 
</table>

（Firefoxの52.1 ESR、クロム58でテスト済み）

私はいくつかの研究を行なったし、SOの質問css opacity affecting sibling image opacityに出会いましたが、（のいずれかまたは両方にpositionとz-indexを追加スタイルクラスbuildとtest）は私の問題を解決しませんでした。

この現象を回避するにはこれまでのところ唯一の方法は、opacity: .99;を私の.testスタイル定義に追加することですが、これはきれいなソリューションではないと考えています。

Answer 1

<div>タグを正しく閉じる必要があります。

実行中にブラウザでマークアップを修正しようとすると、<div>の要素が間違って配置され、兄弟ではなくなりました。

マークアップを修正することで問題は解決します。あなたのコード_Validate_

table { border: 1px solid darkgrey; } 
 
td { border: 1px solid darkgrey; overflow: hidden; } 
 
div { text-align: center; } 
 
.build { 
 
    border: solid black 1px; 
 
    width: 10em; 
 
    margin: 0.2em; 
 
    padding: 0.2em; 
 
    font-size: 1.0em; 
 
} 
 
.test { 
 
    float: right; 
 
    border: solid lightgrey 1px; 
 
    width: 3em; 
 
    margin-top: -0.8em; 
 
    margin-right: -0.4em; 
 
    // opacity: .99;  // workaround 
 
} 
 
.fail { background-color: rgb(255, 150, 150); } 
 
.ok { background-color: rgb(170, 255, 170); } 
 
.red { background-color: rgb(255, 150, 150); } 
 
.green { background-color: rgb(150, 255, 150); } 
 
.stale { opacity: .5; }

<table> 
 
    <tr> 
 
    <th>Version</th> 
 
    <th>Product A</th> 
 
    <th>Product B</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1.1</td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test green">100%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test red">98%</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.0</td> 
 
    <td> 
 
     <div class="build ok stale">success</div> 
 
     <div class="test red">99%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build fail stale">failure</div> 
 
    </td> 
 
    </tr> 
 
</table>