title: Can you use multiple child selectors in one css element?
body: <p>SO I am trying to create a hidden drop down menu and I want only the outer <code>li</code> to have specific css elements. Want I want to know if you can use multiple child selectors, <code>&gt;</code> , so I can apply to the links within those <code>li</code> 's and not have applied to the links in the smaller menus</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;ul class="top"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;random&lt;/a&gt;
      &lt;ul class="second"&gt;
         &lt;li&gt;
            &lt;a href="#"&gt;random second&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;random&lt;/a&gt;
      &lt;ul class="second"&gt;
         &lt;li&gt;
            &lt;a href="#"&gt;random second&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;random&lt;/a&gt;
      &lt;ul class="second"&gt;
         &lt;li&gt;
            &lt;a href="#"&gt;random second&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;random&lt;/a&gt;
      &lt;ul class="second"&gt;
         &lt;li&gt;
            &lt;a href="#"&gt;random second&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>and a css element would be:</p>
  
  <pre><code>ul.top &gt; li &gt; a {
     color: red;
  }
  </code></pre>
  
  <p>whereas I would want the <code>a</code> in <code>ul.second</code> to, a random example, have <code>color: blue</code></p>