Test Cases for CSS Rules with Partly-Invalid Selectors

The CSS spec asserts that user-agents must ignore an entire rule if errors are encountered within any portion of that rule’s comma-delimited selector. This page tests two variations on that scenario.

---

Invalid Pseudo-Class Selector Test

p.invalid-pseudo-class,
    span:has-cheeseburger
{
    color: white;
    background-color: red;
}

Paragraph with a regular & invalid selector [Passed][Failed]

---

Invalid Intricate Pseudo-Class Selector Test

p.invalid-intricate-pseudo-class,
    span:nth-falcon(millennium)
{
    color: white;
    background-color: red;
}

Paragraph with a regular & invalid intricate selector [Passed][Failed]

---

Results

Browser	IE 6	IE 7	Firefox 2.x	Firefox 3 beta	Safari 2.x	Safari 3.x	Opera 9.x
Invalid Pseudo-Class Selector	Failed	Failed	Passed	Passed	Failed	Passed	Passed
Invalid Intricate Pseudo-Class Selector	Passed	Passed	Passed	Passed	Failed	Passed	Passed

---

Thoughts

I wasn’t too surprised by many of the results — the browsers known for their standard-compliance generally continue in that tradition (even if Safari got on board with this nuance only recently).

As far as IE goes, my conjecture is that it’s not intentionally standards compliant when it comes across intricate (but invalid) selectors. It would appear that it simply throws up its arms when it’s unable to wrap its head around a more intricate (but invalid) selector — which just happens to be the right course of action.

---