CSS 3 Module <== Test # ==>
W3C Selectors 16 of 19 of the interactive tests category
Testing Date Revision
Contextual ::selection (ID #162) 2004-05-29 1.1

NOTE: User interaction is required for this test.

Select everything in this document. The following two constructs (in the thick black borders) should end up looking identical. You should also check that the cursor is the same on equivalent parts (in particular the cursor should either be a crosshair over "Tree" and the default everywhere else, or the default everywhere).

Cascadable Advanced Tree Selectors for CSS
Cascadable Advanced Tree Selectors for CSS



  td > div { border: solid thick black; padding: 1em; line-height: 2; }
  td > div > span { padding: 0.25em; }

  /* test version */
  .test > * { background: aqua; }
  .test > div > ::selection { outline: solid thick green; }
  .test > div > :nth-child(even)::selection { outline: solid thick yellow; }
  .test > div > :empty::selection { outline: solid thick blue; background: red; }
  .test > div *::selection { background: transparent; } /* applies to spans 4 to 6 and the strong */
  .test span:first-child::selection { background: white; } /* selects "Cascadable" */
  .test span[id=b]::selection { background: silver; } /* selects "Advanced" */
  .test #b + * + * { background: green; color: white; } /* affects "Selectors"'s span, whose selection inherits the background-color (next rule) */
  .test span[id=b] ~ ::selection { background: inherit; color: inherit; } /* selects "Tree", "Selectors" and "for CSS" but is overriden for "Tree" and "for CSS" */
  .test span[id=b] + ::selection { background: yellow; cursor: crosshair; } /* selects "Tree" */
  .test :not(#b):last-child::selection { background: transparent; } /* selects "for CSS" and "CSS" */
  .test ::selection { color: black; } /* applies to all spans and the strong */
  .test::selection { background: red ! important; } /* applies to the text in the cell and the div... so nothing. */
  .test::selection { color: red ! important; background: aqua; } /* should end up doing nothing - no text at that level and background is aqua is already the background */
  .test strong { color: red ! important; } /* should also end up doing nothing */

  /* control version */
  .control ::selection { background: transparent; color: inherit; cursor: inherit; outline: none; }
  .control > div { background: aqua; color: black; }
  .control > div > span { padding: 0; margin: 0.25em; }
  .control > div > span.a { background: white; }
  .control > div > span.b { background: silver; }
  .control > div > span.c { background: yellow; cursor: crosshair; }
  .control > div > span.d { background: green; color: white; padding: 0.25em; margin: 0; }
  .control > div > span.green { outline: solid thick green; }
  .control > div > span.yellow { outline: solid thick yellow; }
  .control > div > span.blue { outline: solid thick blue; background: red; }

  <div>

   <p>Select everything in this document. The following two constructs
   (in the thick black borders) should end up looking identical. You
   should also check that the cursor is the same on equivalent parts
   (in particular the cursor should either be a crosshair over &quot;Tree&quot;
   and the default everywhere else, or the default everywhere).</p>

   <table>
    <tr>
     <td class="test">

      <div>
       <span>Cascadable</span>
       <span id="b">Advanced</span>
       <span>Tree</span>
       <span>Selectors</span>
       <span><!-- empty --></span>
       <span>for <strong>CSS</strong></span>
      </div>

     </td>
     <td class="control">

      <div>
       <span class="a green">Cascadable</span>
       <span class="b yellow">Advanced</span>
       <span class="c green">Tree</span>
       <span class="d yellow">Selectors</span>
       <span class="e blue"></span>
       <span class="f yellow">for <strong>CSS</strong></span>
      </div>

     </td>
    </tr>
   </table>
  </div>