querySelector, querySelectorAll et :last-child.

En voilà un mystère !

Sujet résolu

8 juillet 2010 à 20:02:31

Kikoo, amateurs de savajcript.
En vrai, j'ai un souci : prenons ce tout bête code.

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <span>FOO</span> <span>FOO</span> <span>FOO</span> <span>FOO</span> <span>FOO</span>
    <script>alert(document.querySelector('body span:last-child'))</script>
  </body>
</html>

J'ai une belle alerte : null .
Tout marche parfaitement avec un :first-child, un :nth-child(foo), mais avec un :nth-last-* ou un :last-child, la fonction renvoie null .

Testé sous Chrome 5.0.375.99 et Firefox 3.6.6

J'ai fait quelque chose de mal ? ;_;
Si vous avez une réponse, d'avance, merci !

xavierm02

8 juillet 2010 à 20:34:10

T'es essayé de le mettre dans un window.onload ?

Et pour les versions,les deux premiers chiffres suffisent...
Personne n'est assez malade pour apprendre les différences par coeur -.-

Iso

8 juillet 2010 à 20:52:12

Rien ne change si je charge au load. :euh:

xavierm02

8 juillet 2010 à 21:04:36

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div><span>FOO</span> <span>FOO</span> <span>FOO</span> <span>FOO</span> <span>FOO</span></div>
    <script>alert(document.querySelector('body span:last-child'))</script>
  </body>
</html>

Tout élément de display inline doit se trouver dans un élément de display block. C'est une règle en HTML si je me souviens bien.
Avant, tu pouvais t'en contre-balancer mais apparemment ils ont décidé de commencer à être rigoureux.
En fait, tu peux aussi tout mettre dans une balise span...
Donc c'est probablement un bug >_<

Anonyme

8 juillet 2010 à 21:06:24

Bon j'ai des précisions préliminaires mais rien de définitif.

HTML5 n'est pas un standard, le validateur est expérimental tout comme les différentes implémentations. Si l'on se réfère donc au HTML4.01 strict, le validateur te ris au nez si <span> est un enfant direct de <body>.

MAIS si tu remplace tes <span> par des <div> dans ton exemple, ça marche.

Moralité, fait pas du code de cochon avant de toucher a ton javascript

@xav : en html5 son code est valide, donc ça devrait marcher

Iso

8 juillet 2010 à 21:19:44

Mon Dieu, si ça c'est pas de l'implémentation faite à l'arrache, je ne sais pas ce que c'est.
En tout cas, merci…
Quelle honte, tout de même.

Anonyme

8 juillet 2010 à 21:24:01

Bah c'est un peu de ta faute, html5 c'est pas un standard

et ton code est pas du html4 valide

:-°

Iso

8 juillet 2010 à 21:29:35

Et le :first-child qui fonctionne et pas le :last-child, ça démontre pas un truc fait à l'arrache ça ?

xavierm02

8 juillet 2010 à 21:37:33

C'est un truc en drafting. C'est plus ou moins normal.