What Happens When the Browser Doesn't Support a CSS Pseudo-Class

What happens when the browser doesn't support a CSS pseudo-class?

Browsers currently make no distinction between unrecognized or unsupported selectors, and invalid selectors. If a browser recognizes a selector, generally it'll have implemented it to the best of its ability (and any behavior that's not to spec can be classified as a bug on its bug tracker), even if it doesn't implement all other features in the same level of Selectors (as is currently the case with :dir() for example, and historically Internet Explorer 7 and 8 with level 3 attribute selectors, and Internet Explorer 6 with the universal selector). If it doesn't recognize the selector, it follows CSS2.1 §4.1.7 to the letter and drops the entire ruleset, no questions asked. Notice that it says

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

which implies that if a user agent cannot parse a selector, it must therefore be invalid CSS2.1 (or invalid in some other level of Selectors); and inversely that if it can parse a selector, it must therefore be valid. But this assumes the user agent conforms fully to the standard; we all know that in reality, different implementations have different levels of conformance to each standard, and certain implementations even have their own vendor-specific selectors which are not part of any standard. So I treat this as "When a user agent cannot parse the selector" without the parenthetical, and I imagine browser vendors do the same.

In fact, Selectors itself makes no distinction between a pseudo-class token with an ident or function that doesn't correspond to a valid pseudo-class, and a series of characters that cannot even be parsed as a pseudo-class — they're both equally invalid — see section 12 of css3-selectors and section 3.9 of selectors-4. Essentially, this means that the current browser behavior is in full compliance with the standard, and not just an arbitrary decision agreed upon by browser vendors.

I've not heard of any browser that recognizes a pseudo-class as valid for the purposes of error handling, and proceeds to ignore either just that pseudo-class or the entire complex selector (leaving other complex selectors in the selector-list unaffected). WebKit did use to have a really bad habit of accepting CSS rules with unrecognized pseudo-elements, allowing things like ::selection, ::-moz-selection, which proved useless anyway because every other layout engine followed the spec more strictly. I believe WebKit no longer does this, however, but you know how WebKit is with these things. But AFAIK it has never done this with pseudo-classes.

On the standards side, selectors-4 appears set to change this with the introduction of the static and dynamic profiles. My email on the subject was addressed in a CSSWG telecon; you can find the minutes here (search for "Behavior of Selectors not in Fast Profile"). However, it was resolved that selectors not in the dynamic (previously fast) profile should be treated as invalid and cause the entire CSS rule to be dropped, as usual. See section 2.1:

CSS implementations conformant to Selectors Level 4 must use the dynamic profile for CSS selection. Implementations using the dynamic profile must treat selectors that are not included in the profile as unknown and invalid.

How to detect if browser support specified css pseudo-class?

You can simply check if your style with pseudo-class was applied.

Something like this: http://jsfiddle.net/qPmT2/1/

Replacing CSS Selectors that supposingly an X browser does not support

All the recent browsers support all the possible CSS selectors including Attribute selectors.
Compatibilty list:

• https://kimblim.dk/css-tests/selectors/

However, to feed your curiosity, it's possible to link a stylesheet to a specific browser. Only, it's not that easy, you'll have to apply it with Javascript. I invite you to read the following topic regarding this matter:

• Different CSS for each browser?

Pseudo-elements ignored by FireFox

Use this:

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

It's cross-browser and works.

Example:

<div class="clearfix">
   <div style="float:left;">1</div>
   <div style="float:left;">2</div>
   <div style="float:left;">3</div>
   <div style="float:left;">4</div>
</div>

Added style="float:left;" to show they are floating, but don't use inline CSS.
No need for extra markup just to clear.

IE doesn't show :after pseudo element

Psuedo-elements are handled as children of the element they are attached do.

<hr>
    <psuedo-element-after> image here </psuedo-element-after>
</hr>

This is not valid, because <hr /> doesn't allow children. Therefore, it won't work.

Consider applying the background image to the <hr /> itself, or use something like a class to do it, like this: <div class="divider"></div>

Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

CSS2.1 states:

The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

Note that since CSS2.1 pre-dates CSS3, "it is not valid CSS 2.1" is written under the assumptions that a user agent is fully CSS2.1-compliant and that CSS3 does not exist in theory. In practice, wherever the spec says "it is not valid CSS" or something to that effect, it should be taken to mean "it is not understood by the user agent". See my answer to this related question for a more in-depth explanation.

Namely, since one vendor's browser doesn't understand other vendors' prefixes, it has to drop any rules that contain those unrecognized prefixes in pseudo-class and pseudo-element selectors.¹

For some insight as to why such a rule was put in place, see this answer.

---

¹ _{Note that WebKit is notorious for partially flouting this rule: it has no trouble parsing rules whose selectors have unrecognized prefixed pseudo-elements (which in this case is ::-moz-placeholder). That said, the :-moz-placeholder pseudo-class in your combined rule will cause it to break anyway.}

Can't add multiple pseudo-classes to a :not() pseudo-class

Multiple classes selectors to :not is only supported in CSS selectors level 4 and it doesn't work in all browsers. It currently only works in Safari, instead you could use multiple :not

.div-list div:not(:last-child):not(:first-child) {
  border:1px solid blue;
}

Check the browser support doc

---

Related Topics