title: CSS style for parent table first <td> in a nested table
body: <p>I'm trying to add some css style to the first <strong>td</strong> element of my parent table only but if i use <code>td:first-child {width: 18%;}</code> it is applying to the child table first <strong>td</strong> also. So, is there any css selector to select the parent table only ?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
  }
  
  td:first-child {
    width: 18%;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
       &lt;label&gt;Parent first td&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;Child first td&lt;/td&gt;
            &lt;td&gt;Child second td&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>