title: How do I select child elements of any depth using XPath?
body: <p>Suppose I have this (simplified):</p>
  
  <pre><code>&lt;form id="myform"&gt;
      &lt;!-- some input fields --&gt;
      &lt;input type="submit" value="proceed"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then I can select the submit button by XPath <code>//form[@id='myform']/input[@type='submit']</code>. Great.</p>
  
  <p>However, my templates might change and I want to be flexible in the depth in which the submit button is located. It might be put in a table, like this:</p>
  
  <pre><code>&lt;form id="myform"&gt;
      &lt;!-- some input fields --&gt;
      &lt;table&gt;&lt;tr&gt;&lt;td&gt;
             &lt;input type="submit" value="proceed"/&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I know I can select elements which are grandchildren, but I can't select grand-grand-grand-...-childeren of any depth. E.g.:</p>
  
  <ul>
  <li><code>//form[@id='myform']/*/input[@type='submit']</code> only selects grand-children, no further depths.</li>
  <li><code>//form[@id='myform']/*/*/input[@type='submit']</code> only selects grand-grand-children, no further or less depths.</li>
  <li><code>//form[@id='myform']/**/input[@type='submit']</code> is not valid.</li>
  </ul>
  
  <p>So, how do I select this submit button reliably without using element IDs?</p>