title: Direct descendant not working (>)
body: <p>So the code below is how I want the table to look. But I was wondering if I could achieve the same thing using the direct descendant CSS selector combinator (next code snippet).</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>.tabs td.line + td.line {
    border-left: 1px solid grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellspacing="0" cellpadding="0" class="tabs" style="border-bottom: 5px solid black" width="100%"&gt;
    &lt;tr&gt;
      &lt;td height="10px"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
          &lt;td valign="center" align="center" style="padding: 10px 0" class="line"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  something
                &lt;/td&gt;
                &lt;td valign="center"&gt;
                 something else
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;
          &lt;td valign="center" align="center" style="padding: 10px 0" class="line"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  something
                &lt;/td&gt;
                &lt;td valign="center"&gt;
                 something else
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;
          &lt;td valign="center" align="center" style="padding: 10px 0" class="line"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  something
                &lt;/td&gt;
                &lt;td valign="center"&gt;
                 something else
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;        
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This doesn't work as expected. Was expecting it to go to first table, find direct descendant <code>tr</code> and apply it to direct descendant <code>td</code>.</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>.tabs &gt; tr &gt; td + td {
    border-left: 1px solid grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellspacing="0" cellpadding="0" class="tabs" style="border-bottom: 5px solid black" width="100%"&gt;
    &lt;tr&gt;
      &lt;td height="10px"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
          &lt;td valign="center" align="center" style="padding: 10px 0" class="line"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  something
                &lt;/td&gt;
                &lt;td valign="center"&gt;
                 something else
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;
          &lt;td valign="center" align="center" style="padding: 10px 0" class="line"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  something
                &lt;/td&gt;
                &lt;td valign="center"&gt;
                 something else
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;
          &lt;td valign="center" align="center" style="padding: 10px 0" class="line"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  something
                &lt;/td&gt;
                &lt;td valign="center"&gt;
                 something else
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;        
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically wondering only about the css part.</p>