Find all <th> within a table of certain classname

Question

I know this is quite simple, but struggling to get it to work.

I have a page with two tables, but I only want to find the <th>'s of a table, with a particular class name flexi-fruit.

For example:

<table class="flexi-fruit">
    <colgroup>
    <col>
    <col span="2">
    </colgroup>
    <tbody>
        <tr class="header-row">
            <th>
            </th>
            <th>&nbsp;Standard&nbsp;</th>
            <th>&nbsp;Exotic&nbsp;</th>
        </tr>
        <tr>
            <td>
            Blah
            </td>
            <td>
            Blah
            </td>
            <td>
            Blah
            </td>

        </tr>

    </tbody>
</table>

So I want to find all the <th>s, in the table with the classname flexi-fruit. (And then do something).

Something like this document.querySelectorAll('th.flexi-fruit'),which obviously doesn't work.

Thanks.

Answer 1

You just had a wrong selector. document.querySelectorAll('table.flexi-fruit th'). This should work. Your selector would match every th which has the class flexi-fruit.

Answer 2

Your css selector order is wrong. Refer to the css selector

document.querySelectorAll('table.flexi-fruit th')