<csstest def="Contextual ::selection" module="W3C Selectors" modulename="css3-modsel" number="162" rev="1.1" date="29-may-2004" xmlns="http://www.example.org/css3tests">

<author>Ian Hickson</author>

<userinteraction/>

<cssrules>

<!--
     foo::selection matches the part of <foo> that has the selection.
     *::selection matches the parts of every element that have the selection.

     The following properties definitely apply to ::selection:
        color
        background-color
        outline
        cursor
        ?

     This is quite a thorough test IMHO. :-)
  -->

  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; }

</cssrules>

<code>
  <div xmlns="http://www.w3.org/1999/xhtml">

   <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 "Tree"
   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 class="f yellow">for <strong>CSS</strong></span>
      </div>

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

</csstest>