I was testing a simple validation routine on a form using the following code:
$('form :input').each(function() {
//...
});
Viewing the page, everything worked just fine, except that the Web Developer Toolbar of Firefox showed a CSS error in the browser console. Simply put, the jQuery's pseudo-element :input was marked as unknown by Firefox (correctly, because this pseudo-element is used only by jQuery and it's not part of any CSS specification). Of course the same thing applies to all jQuery pseudo-elements which are not included in the CSS specifications.
Why does this happens? In simple terms, jQuery uses a string-based approach to match CSS selectors. Since CSS parsing is actually a string-based parsing (based on the tokens defined in this chapter of the specifications), when a browser encounters a string that doesn't correspond to the CSS tokens supported in its implementation, it emits an error (Firefox uses its internal class NSError and other like that). In that case, Firefox emits an error and shows one of the CSS errors contained in a configuration file of its chrome interface after notifying the error to the console.
This is not a real problem, of course, because it's only noticeable if a visitor has installed the developer toolbar. Of course this is not a bug, neither for jQuery or Firefox. If you're a perfectionist, you can prevent this from happening by using valid CSS selectors, like this:
$('form input').add('textarea').add('select').each(function() {
//...
});
Yes, it's actually verbose and requires a lot of typing, so it's better to stick to the first option for the sake of brevity.