Testing CSSRule.selectorText and FindRule

Test Area

span #fooBar .fooBar #fooFoo .fooFoo #barFoo .barFoo .fooFoo.barBar #barBar.fooFoo

Your Browser

Given the following CSS rules...

span                { color:red }
#fooBar             { color:orange }
.fooBar             { color:yellow }
*#fooFoo            { color:chartreuse }
*.fooFoo            { color:green }
SPAN#barFoo         { color:blue }
SPAN.barFoo         { color:purple }
span.fooFoo.barBar  { color:violet }
span#barBar.fooFoo  { color:black }

...here's what your browser says the selectors are:

Other Browser Results

Original CSS	Mozilla Flavors	IEWin v6	IEMac v5.2.3	Safari v1.2
span #fooBar .fooBar *#fooFoo *.fooFoo SPAN#barFoo SPAN.barFoo span.fooFoo.barBar span#barBar.fooFoo	span #fooBar .fooBar #fooFoo .fooFoo span#barFoo span.barFoo span.fooFoo.barBar span#barBar.fooFoo	SPAN #fooBar .fooBar #fooFoo .fooFoo SPAN#barFoo SPAN.barFoo SPAN.barBar SPAN.fooFoo#barBar	SPAN *#fooBar *.fooBar *#fooFoo *.fooFoo SPAN#barFoo SPAN.barFoo SPAN.barBar SPAN.fooFoo#barBar	SPAN *[ID"fooBar"] .fooBar *[ID"fooFoo"] .fooFoo SPAN[ID"barFoo"] SPAN.barFoo[CLASS~="barFoo"] SPAN.fooFoo[CLASS~="fooFoo"].barBar SPAN[ID"barBar"].fooFoo

Notes

• Opera v7 doesn't support document.styleSheets at all, so none of the JS code will work.
• IEWin and IEMac both report element.class1.class2 as simply element.class2. (IEMac supports the syntax and just screws up the reporting; IEWin doesn't support the syntax at all, which is why '.fooFoo.barBar' in the Test Area at the top is huge and red on IEWin.)
• IEWin and IEMac both reverse the order of element#id.class rules when reporting the selectorText.
• Under an HTML4 DocType (which this test page uses) Mozilla flavors use lowercase for element names in the selector; IE and Safari use upper-case.
• IEMac prepends all id and class selectors with '*' when no element is specified.
• I don't know what was being smoked by the Safari team. SPAN.barFoo[CLASS~="barFoo"]?!