title: Selecting just one child using CSS3
body: <p>I have a simple CSS3 question regarding to selecting appropriate child node. </p>
  
  <p>Here is a snippet of current HTML element structure:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;div class="adminNavButton"&gt;&lt;p&gt;Pages&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Make a new page&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Manage pages&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Delete pages&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  and more .... &lt;/ul&gt; &lt;/nav&gt;
  </code></pre>
  
  <p>In CSS3, I'm trying to select just 
  <code>&lt;a href="#"&gt;&lt;div class="adminNavButton"&gt;&lt;p&gt;Pages&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;</code> using  </p>
  
  <pre><code>nav ul li a{
  }
  </code></pre>
  
  <p>However, it selects every children anchor tags including ones under <code>&lt;ul&gt;&lt;li&gt;</code>. Do I have to give it a class selector to solve the issue? i.e.</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a class="something" href="#"&gt;&lt;div class="adminNavButton"&gt;&lt;p&gt;Pages&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>If you know a technique that works across all browsers, I would appreciate it if you could share it with me. </p>
  
  <p>Thanks in advance,</p>
  
  <p>=================================
  Thanks for all your comments guys, :first-child nor :nth-child(1) didn't work from my main project so I've created a new project and tested the method. But it did not work
  So here is HTML structure and CSS3.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;asf&lt;/title&gt;
      &lt;style&gt;
          ul li a:first-child{
              color: red;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href=""&gt;asf&lt;/a&gt;
              &lt;div&gt;
                  &lt;a href=""&gt;asf&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;asfd&lt;/a&gt;
              &lt;div&gt;
                  &lt;a href=""&gt;asf&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;asf&lt;/a&gt;
              &lt;div&gt;
                  &lt;a href=""&gt;asf&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>hmm heh =/ (p.s. I've tested it on Firefox and Chrome browser but didn't work)</p>