title: Select `li` of `nav > ul`
body: <p>How can I select the elements <code>li</code>, children of the element <code>nav &gt; ul</code>?</p>
  
  <p>As you can see in the following snippet, I can select <code>nav &gt; ul</code> and remove the listing style. However, I can't manage to change the color of only <code>Link1</code>, <code>Link2</code> and <code>Link3</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav &gt; ul {
      list-style: none;
  }
  
  nav &gt; ul li {
      color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;
              Link1
          &lt;/li&gt;
          &lt;li&gt;
              Link2
          &lt;/li&gt;
          &lt;li&gt;
              Link3
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      Link3-1
                  &lt;/li&gt;
                  &lt;li&gt;
                      Link3-1
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The answer <code>nav &gt; ul &gt; li</code> does not work, according to <a href="https://jsfiddle.net/sosnLg5z/1/" rel="nofollow">this JSFiddle</a>. To people down voting the question, could you <em>at least</em> provide a reason?</p>