nth-child selector seems not working properly

[timnew]

I found nth-child selector is not working as expected.

Having a simple html

<div id="content">
    <table>
        <tbody>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
        </tr>
        </tbody>
    </table>
</div>

And running tests as below

// Passed
expect(document.querySelector('#content > table > tbody > tr:nth-child(1) > td:nth-child(1)').text, equals('1,1')); 

// NoSuchMethodError: The getter 'text' was called on null.
expect(document.querySelector('#content > table > tbody > tr:nth-child(1) > td:nth-child(2)').text, equals('1,2')); 

// NoSuchMethodError: The getter 'text' was called on null.
expect(document.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(1)').text, equals('2,1')); 

// NoSuchMethodError: The getter 'text' was called on null.
expect(document.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(2)').text, equals('2,2'));

nth-child yields null

[Livinglist]

And I encountered the same problem just now... Have you figured out the solution yet?

[timnew]

@Livinglist No I didn't find any fix, so I ended up to avoid the nth-child selector.
I fetch the whole element list by avoid the selector, then pick the one I want via in dart code.

The code is ugly and hard to read, but it works.

[pokonski]

Same issue, nth-child does not seem to be supported, which is a bummer

[chen-zeyu]

Nth-child will be supported : dart-archive/html#101

[HeCorr]

It has been 2 years.. Is this gonna be implemented or not? I really need querySelector() to work...

[zhatuokun]

It has been 2 years.. Is this gonna be implemented or not? I really need querySelector() to work...

you can try universal_html

[HeCorr]

you can try universal_html

yeah, that's the one I'm using now. I forgot to mention it here.

[Laestry]

Still doesn't work correctly....

[ismanong]

中文: 奇妙的规律可以使用nth-child
English: The curious rule can be used with nth-child

<!-- note -->
<div>...</div>
<div>目标</div>

中文: 注释算2个单位，目标div之前的div算2个单位，获取目标4+1，即：nth-child(5)
English: Note counts as 2 units, the div before the target div counts as 2 units, get target 4+1, i.e.: nth-child(5)

[Masood-1]

I go through selector code implementation in html package and I found the nth-child selector for some reason is offset by one from js , so the solution is remove one from what ever you try to get for example if the selector in js look like thistr : nth-child(2) it will be tr : nth-child(1) in dart. please try and let me know if it works with your code.

[realth000]

@Masood-1 Removing one not works with my code.

Actually I didn't realize nth-child may not work properly until yesterday.

I'm matching a part of html code like this:

<dd>
    <em>
        <font color="#666">foo1</font>
        <font color="#0099FF">bar1</font>
    </em>
    <em>
        <font color="#666">foo2</font>
        <font color="#99CC00">bar2</font>
    </em>
    <em>
        <font color="#666">foo3</font>
        <font color="#FF3399">bar3</font>
    </em>
</dd>

Using something like:

final bar1Text = element.querySelector('em:nth-child(1) > font:nth-child(2)').text;
final bar2Text = element.querySelector('em:nth-child(2) > font:nth-child(2)').text;
final bar3Text = element.querySelector('em:nth-child(3) > font:nth-child(2)').text;

nth-child can only match bar2, bar1Text and bar3Text are always null, which is really weird.

Giving it an offset also not work.

So I have to use a workaround like:

final bar1Text = element.childAtOrNull(0)?.childAtOrNull(1)?.text;
final bar2Text = element.childAtOrNull(1)?.childAtOrNull(1)?.text;
final bar3Text = element.childAtOrNull(2)?.childAtOrNull(1)?.text;