Question

Normally, i’m using Modernizr for regular feature detection but it can’t detect browser selector support (i.e: :nth-of-type() selector).

Is there a way to detect selector support of browser with jQuery?

Answer 1

You are right that selecting an element with a jQuery selector will work even in browsers that do not support that selector in CSS.

However, you could apply a style with a CSS3 selector, and then select an element with jQuery to determine if that style has been applied.

For instance in CSS:

#myid > p {
  display: none;
}

and then in jQuery:

if ( $( '#myid > p' ).css('display') != 'none' ) {
 // blah
}

However be careful because .css() may not return what you expect. For instance if you apply a color like ‘red’, it will return rgb(255, 0, 0).

Sorry I know this isn’t as perfect of a solution as Modernizr, but I hope it helps you in your situation.