Div innerhalb wie Klasse in CSS aufrufen?

Question

Ich habe den folgenden Code erwähnt.

Ausgabe erforderlich: Wenn Sie auf das Kontrollkästchen klicken, werden die Spalten tr class = "invalid" nicht angezeigt (ausgeblendet). Wenn Sie die Option deaktivieren, werden alle tr-Spalten angezeigt.

Jede Lösung ist nennenswert.

Answer 1

Ich denke, man den benachbarten Selektor verwenden können, damit es funktioniert:

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

Schnipsel unten:

#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

Verwenden Sie den allgemeinen Geschwisterselektor ~ Es trennt zwei Selektoren und passt das zweite Element nur an, wenn das erste Element vorangestellt ist und beide ein gemeinsames Elternelement verwenden.

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

Answer 3

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

Wäre der einfachste Weg sein.