CSS 3 Module | <== Test # ==> | |
---|---|---|
W3C Selectors | 140 of 178 | |
Testing | Date | Revision |
Contextual ::selection (ID #162) | 2001-11-20 | 1.0 |
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 be a crosshair over "Tree" and the default everywhere else.)
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 be a crosshair over "Tree" and the default everywhere else.)</p> <table> <tr> <td class="test"> <div> <span>Cascadable</span> <span id="b">Advanced</span> <span>Tree</span> <span>Selectors</span> <span><!-- empty (this comment is not included in the actual tests) --></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>