Détecter: le support du premier enfant

Question

Comment détecter, en utilisant JavaScript, si le navigateur prend en charge le sélecteur CSS :first-child?

Answer 1

Vous pouvez simplement utiliser cette règle :first-child pour définir une valeur spécifique, puis obtenir le style calculé en Javascript pour voir si la règle :first-child est appliquée, par ex.

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

(Ce n'est pas testé. Je n'ai pas IE 6.)

Answer 2

Je ne pense pas qu'il existe une fonction jQuery pour trouver un support pour cela. J'imagine que si ça existe, ça va être assez compliqué. Êtes-vous vraiment sûr que vous en avez besoin? Souciez-vous de partager pourquoi?

Si vous pouvez utiliser jQuery de toute façon, pourquoi ne pas ajouter une instruction jQuery pour affecter la classe/propriété/quelquechose à l'élément désiré, au lieu de s'appuyer sur CSS? Comme une réponse "manuelle", en regardant le quirksmode.org compatibility table, le sélecteur est entièrement pris en charge dans tous les navigateurs modernes, sauf la famille IE qui semble avoir des problèmes, même dans IE8.