Detect :first-child support

How to d开发者_如何学编程etect, using JavaScript, if the browser supports the CSS :first-child selector?

You could just use that :first-child rule to set some specific value, and then get the computed style in Javascript to see if the :first-child rule is applied, e.g.

<style>
#foo { width: 200px; }
#foo:first-child { width: 400px; }
</style>

<span><span id="foo"></span></span>

<script>
if ($('#foo').width() < 400)
   alert('first-child not supported.');
</script>

(This is not tested. I have no IE 6.)

I don't think there is a jQuery function to find out support for this. I expect if it does exist, it is going to be quite complicated. Are you really sure you need this? Care to share why?

If you can use jQuery anyway, why not add a jQuery statement to assign the class/property/whatever to the desired element, instead of relying on CSS?

As a "manual" answer, looking at the quirksmode.org compatibility table, the selector is fully supported in all modern browsers except the IE family which seems to have problems even in IE8.