How to Prevent the "Unknown pseudo-class or pseudo-element [...]" Warning in Firefox

posted by Kravvitz at 9:28 AM on Mar. 25th, 2010

Categories: CSS, jQuery, Mozilla 1 comments

For several of jQuery's pseudo-selectors that aren't part of CSS3 Selectors, one can use ":nth-child()" (as suggested by SitePoint's Andrew Tetlaw), which is a CSS3 selector, instead. In many cases (but not always!), you can use ":nth-child()" instead of ":eq()", ":first" (which is the same as ":eq(0)"), ":even", and ":odd". For the first and second though, be careful that you add 1 to the index because ":eq()" uses a 0-based index, while ":nth-child()" uses a 1-based index. That also has the affect that odd and even are backwards, so be careful how you use this alternative. And whether the first element has an index of 0 or 1 is not the only difference, so I recommend you read the documentation for using ":nth-child()" in jQuery. For example, if you wanted to prevent the warning when using "ul.nav a:first", you would need to use "ul.nav li:nth-child(1) a" instead. Keep in mind that ":eq()" is more like ":nth-of-type()" than ":nth-child()", but still different, because ":eq()" isn't affected by whether all of the matched elements share the same (direct) parent or not.

Also to prevent this warning for ":checkbox", ":image", ":radio", ":file", ":password", ":radio", ":reset", and ":text" you can use the good ol' attribute selector. ":button" and ":submit" are similar but more complex because of certain browser bugs related to the type attribute of <button> elements.

I consider this to be a Firefox bug. I see no reason why Firefox should be checking JavaScript code for CSS Selectors and producing warnings when it finds a selector that it doesn't recognize. If you know why Firefox does this, I would very much like to hear the explanation.

#1 Bruno G. 8:41 AM on Nov. 11th, 2010

This page will give you some info about that :

Login or Register to post a comment