CSS Selector Shell
Directions
Type/paste some handcrafted CSS into the first box.
Click the "Test It" button.
The second box (and the example divs) show what your browser
makes of it
.
Sorry, but there's no backend for the Selector Shell. The functionality is pure Javascript. Therefore, it doesn't have a degradation path at the moment, other than my apology.
/* Some example CSS */ body .class1 { border-color: black; } /* Gecko hack. */ @-moz-document url-prefix() { body .class1 { border-color: orange; } } /* Pre IE7 hack. */ * html body .class1 { border-color: green; } /* IE7 hack. */ body .class1 { *border-color: purple; } /* Webkit hack. */ @media screen and (-webkit-min-device-pixel-ratio:0) { body .class1 { border-color: red; } } .class1, .class2 { color: purple; } /* Direct child selector. */ .class1 > .class2 { color: red; } /* Combined selector. */ .class1.class2 { color: blue; color: orange; }
Example elements you can target
div class="class1 class2"
div class="class2"