All geek questions in one place

QuerySelector with nested nth-child in Chrome not working

I was looking for using nth-child in the nth-child selector to find an element. This seems to work in Firefox, but does not seem to work on chrome. Here is my test file:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>untitled</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" charset="utf-8"> myFunc = function() { if(document.querySelector('#wonderful DIV:nth-child(2) DIV:nth-child(2)')) { alert("found the element"); } else { alert("element not found"); } }; </script> </head> <body onLoad="myFunc()"> <div id="wonderful"> <div> </div> <div > <div> </div> <div class="blue"> find me! </div> </div> </div> </body> </html>

Has anyone else seen this problem? Do you have a solution to get around this?

+9
source share
2 answers

This worked for me in chrome, but it doesn't work in FF.

 document.querySelector('#wonderful div:nth-child(2):nth-child(2)')

The following snapshot works in both browsers, but I suppose you know that already

 document.querySelector('#wonderful div:nth-child(2) div.blue')

So for me it looks like a failure to implement chrome.

+13
source

Found this (very old) question while hunting for red herring. This answer is worth noting: today Chrome v73 works just fine. The snippet here proves this:

 const sel = '#wonderful div:nth-child(2) div:nth-child(2)'; console.log(document.querySelector(sel)) 
  <div id="wonderful"> <div></div> <div> <div></div> <div class="blue">find me!</div> </div> </div>
0
source

Source: https://habr.com/ru/post/890510/

More articles:


All Articles