<!DOCTYPE html> <html> <head> <title>CSS Child selector emulation for IE 6</title> <style> /** Common rules **/ body { background-color: #CCC; } table { border:1px black solid; } caption { background-color: #98fb98; border:1px solid #40FF40; } /** "old" rules" **/ table.global th, table.global td { border: 1px red solid; background-color:white; padding:1em; } table.global th { background-color: #ffc0cb; } /** second table. Try to emulate child selector */ table.childemu th, table.childemu td { border: 1px red solid; background-color:white; padding:1em; } table.childemu th { background-color: #ffc0cb; } /** Reset style applied in childemu classes */ /** TODO: find the real default value!! */ table.childemu tr * th, table.childemu tr * td { border: none; background-color: transparent; padding: 0; } /** child selector emulation */ </style> </head> <body> <p> The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global"). </p> <table class="global"> <caption>Global table</caption> <tr> <th>TH: should have pink bg</th> </tr> <tr> <td>TD: white bg</td> </tr> <tr> <td> <table class="nested"> <caption>Nested table</caption> <tr> <th>Nested TH: transparent</th> <td>Nested TD: transparent</td> </tr> </table> </td> </tr> </table> <p> With child selector we could limit the wikitable styling to the direct childs of the table. Unfortunately, Internet Explorer 6.0 does not support child selector. See <a href="https://bugzilla.wikimedia.org/show_bug.cgi?id=33752">our bug #33752</a>. </p> <table class="childemu"> <caption>Global table</caption> <tr> <th>TH: should have pink bg</th> </tr> <tr> <td>TD: white bg</td> </tr> <tr> <td> <table class="nested"> <caption>Nested table</caption> <tr> <th>Nested TH: transparent</th> <td>Nested TD: transparent</td> </tr> </table> </td> </tr> </table> <p><strong>NOTE:</strong>The nested caption keep the green background. The nested table keep the black border. This is because those declarations are global so we did not reset them.</p>