Divの中でどのようにCSSのクラスを呼び出すには？

Question

私は以下のコードを記述しました。

出力が必要：チェックボックスをオンにすると、trクラス= "無効な"列は表示されません（非表示）。すべてのtr列の表示をオフにすると、

いずれの解決策も認められます。

Answer 1

私はあなたがそれを動作させるために隣接セレクタを使うことができますね：以下

#testday input[type="checkbox"]:checked ~ #testtable .invalid { 
    display:none; 
} 

はスニペット：

#testday input[type="checkbox"]:checked ~ #testtable .invalid { 
 
    display: none; 
 
}

<div id="testday"> 
 
    <input type="checkbox" checked><span class="invalid black-border">Tests not in POR</span> 
 
    <table id="testtable" class="tablesorter custom-popup"> 
 
    <thead> 
 
     <tr> 
 
     <th data-priority="critical" class="testName">Test Name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="BasicPerformanceMatrixTest">BasicPerformanceMatrixTest</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="StripeReadECCFatalDuringPLIRestore_NSGSE-23331">StripeReadECCFatalDuringPLIRestore_NSGSE-23331</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="ContextReplayTimes_NSGSE-27617">ContextReplayTimes_NSGSE-27617</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="XORRecoveryShouldSkipRetiredPages_NSGSE-27131">XORRecoveryShouldSkipRetiredPages_NSGSE-27131</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801">PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802">PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PliDumpECCFatal(XOROff_1Page)_NSGSE-22803">PliDumpECCFatal(XOROff_1Page)_NSGSE-22803</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PLIECCFatal(SuperXORtest)_NSGSE-23162">PLIECCFatal(SuperXORtest)_NSGSE-23162</abbr> 
 
     </td> 
 

 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

DEMO

CSS

一般的な兄弟セレクタを使用~ 2つのセレクタを分離し、2番目の要素の前に1つだけある場合にのみ2番目の要素と一致し、両方が共通の親を共有します。

input[type="checkbox"]:checked ~ table .invalid { 
    display:none; 
} 

Answer 3

input[type="checkbox"]:checked ~ #testtable .invalid { 
    display:none; 
} 

最も簡単な方法だろう。