posted by Kravvitz at 9:28 AM on Mar. 25th, 2010Categories: 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.