title: Which CSS selector is faster: ul > li:nth-of-type(3) > a .. or ul > li > a:nth-of-type(3)
body: <p>Suppose I have a list like</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;a&gt;List item 1&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a&gt;List item 2&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a&gt;List item 3&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a&gt;List item 4&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Then the selectors <code>ul &gt; li:nth-of-type(3) &gt; a</code> and <code>ul &gt; li &gt; a:nth-of-type(3)</code> target the same element. But which one is faster on average? And why?</p>
  
  <p>In general, if you have something like </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;a&gt;List item 1&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a&gt;List item 2&lt;/a&gt;
    &lt;/li&gt;
    .
    .
    .
    &lt;li&gt;
      &lt;a&gt;List item k&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and need to select <code>ul &gt; li:nth-of-type(i) &gt; a</code> for some <code>i</code> in the range <code>[1, k]</code>, is it faster to use <code>ul &gt; li &gt; a:nth-of-type(i)</code>???</p>