How getChildrenSelector work on select html genarate from mjml

Hi i new to js and still try to understand how function getChildrenSelector() work

Example i have this mj-hero component

<mj-hero mode="fixed-height" height="469px" background-width="800px" background-height="469px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="100px 0px" width="800px">
      <mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900">
        GO TO SPACE
      </mj-text>
      <mj-button href="https://mjml.io/">
        ORDER YOUR TICKET NOW
      </mj-button>
    </mj-hero>

when transform into html is get like this

<body style="word-spacing:normal;">
  <div style="">
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:469px;mso-position-horizontal:center;position:absolute;top:0;width:800px;z-index:-3;" src="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
    <div style="margin:0 auto;max-width:600px;">
      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tr style="vertical-align:top;">
          <td background="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" style="background:#2a3448 url('https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:100px 0px;vertical-align:top;" height="269">
            <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->
            <div class="mj-hero-content" style="margin:0px auto;width:800px;">
              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                <tr>
                  <td style="">
                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                      <tr>
                        <td align="center" style="font-size:0px;padding:20px;word-break:break-word;">
                          <div style="font-family:Helvetica;font-size:45px;font-weight:900;line-height:45px;text-align:center;color:#ffffff;">GO TO SPACE</div>
                        </td>
                      </tr>
                      <tr>
                        <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                            <tr>
                              <td align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle">
                                <a href="https://mjml.io/" style="display:inline-block;background:#414141;color:#ffffff;font-family:Times New Roman;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"> ORDER YOUR TICKET NOW </a>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </div>
            <!--[if mso | IE]></td></tr></table><![endif]-->
          </td>
        </tr>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
</body>

the function getChildrenSelector in hero component

      getChildrenSelector() {
        return 'table tr td';
      },

Did the table selector is the first table html element or second?

Can someone help me explain what this means?

Thanks @artf @gustavohleal

GrapesJS / mjml

How getChildrenSelector work on select html genarate from mjml #311