Question

How to detect, using JavaScript, if the browser supports the CSS :first-child selector?

Answer 1

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.)