Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points

I have a question about jquery

Hi, I have a question about jQuery. When using CSS selectors when selecting an element is it cross browser compatible?

For example:

$("blockquote:nth-child(3)").fadeOut(100);

Does this select correctly even with a browser that does not support nth-child?

Thanks in advanced!

3 Answers

Mark Flavin
Mark Flavin
10,199 Points

James see below Chris Coyier did a write up on Nth Child and particularly called attention to the fact that it is supported by older versions of IE.

Also if you look in the jQuery source you will note that it is doing the nth child selection using some niffty regex not calling the browser CSS.

"CHILD": function( match ) {
        /* matches from matchExpr["CHILD"]
            1 type (only|nth|...)
            2 what (child|of-type)
            3 argument (even|odd|\d*|\d*n([+-]\d+)?|...)
            4 xn-component of xn+y argument ([+-]?\d*n|)
            5 sign of xn-component
            6 x of xn-component
            7 sign of y-component
            8 y of y-component
        */
        match[1] = match[1].toLowerCase();

        if ( match[1].slice( 0, 3 ) === "nth" ) {
            // nth-* requires argument
            if ( !match[3] ) {
                Sizzle.error( match[0] );
            }

            // numeric x and y parameters for Expr.filter.CHILD
            // remember that false/true cast respectively to 0/1
            match[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );
            match[5] = +( ( match[7] + match[8] ) || match[3] === "odd" );

        // other types prohibit arguments
        } else if ( match[3] ) {
            Sizzle.error( match[0] );
        }

        return match;

Browser Compatibility

nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. So when it comes to it's use, if the end result is "progressive enhancement" in some fashion (e.g. applying a cool color palette to table rows, for example), then by all means, go for it. But you probably shouldn't use it if you are doing something more important, like relying on it for site structure. For example, removing the right margin from every third box in a three by three grid of boxes, so they will fit properly.

One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.

http://css-tricks.com/how-nth-child-works/

Mark Flavin
Mark Flavin
10,199 Points
Mark Flavin
Mark Flavin
10,199 Points

It will work cross browser doing the selection in jQuery though the same selector may or may not work in CSS depending on the browser. That said I would look consider the eq() method as well depending on the situation ( size of set, pattern depth, complexity, etc... ) and browser you may see a slight performance bump. Not enough to sweat over but if you are animation heavy on the page you may notice the difference.

http://jsperf.com/compare-jquery-eq-vs-nth-child

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I don't think so, I'd be curious if someone could link to an authoritative source.