docs/uidesign/child-selector-emu.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>CSS Child selector emulation for IE 6</title>
   5         <style>
   6                 /** Common rules **/
   7                 body  { background-color: #CCC; }
   8                 table { border:1px black solid; }
   9                 caption {
  10                         background-color: #98fb98;
  11                         border:1px solid #40FF40;
  12                 }
  13
  14                 /** "old" rules" **/
  15                 table.global th,
  16                 table.global td
  17                 {
  18                         border: 1px red solid;
  19                         background-color:white;
  20                         padding:1em;
  21                 }
  22                 table.global th
  23                 {
  24                         background-color: #ffc0cb;
  25                 }
  26
  27                 /** second table. Try to emulate child selector */
  28                 table.childemu th,
  29                 table.childemu td {
  30                         border: 1px red solid;
  31                         background-color:white;
  32                         padding:1em;
  33                 }
  34                 table.childemu th
  35                 {
  36                         background-color: #ffc0cb;
  37                 }
  38
  39                 /** Reset style applied in childemu classes */
  40                 /** TODO: find the real default value!! */
  41                 table.childemu tr * th,
  42                 table.childemu tr * td {
  43                         border: none;
  44                         background-color: transparent;
  45                         padding: 0;
  46                 }
  47
  48
  49                 /** child selector emulation */
  50         </style>
  51 </head>
  52 <body>
  53 <p>
  54 The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global").
  55 </p>
  56 <table class="global">
  57 <caption>Global table</caption>
  58 <tr>
  59         <th>TH: should have pink bg</th>
  60 </tr>
  61 <tr>
  62         <td>TD: white bg</td>
  63 </tr>
  64 <tr>
  65         <td>
  66                 <table class="nested">
  67                 <caption>Nested table</caption>
  68                 <tr>
  69                         <th>Nested TH: transparent</th>
  70                         <td>Nested TD: transparent</td>
  71                 </tr>
  72                 </table>
  73         </td>
  74 </tr>
  75 </table>
  76
  77 <p>
  78 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>.
  79 </p>
  80 <table class="childemu">
  81 <caption>Global table</caption>
  82 <tr>
  83         <th>TH: should have pink bg</th>
  84 </tr>
  85 <tr>
  86         <td>TD: white bg</td>
  87 </tr>
  88 <tr>
  89         <td>
  90                 <table class="nested">
  91                 <caption>Nested table</caption>
  92                 <tr>
  93                         <th>Nested TH: transparent</th>
  94                         <td>Nested TD: transparent</td>
  95                 </tr>
  96                 </table>
  97         </td>
  98 </tr>
  99 </table>
 100 <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>