title: How do I target a specific element nested in HTML/CSS code?
body: <p>I want to target a specific element and whatever properties I set on the logo overrides the other listed items. For example, I have a border style that is solid and it runs through all the listed items of #nav. I just want to make the image link <strong>logo</strong> an exception to this. The logo is located right in the middle between portfolio and projects. How do I do this?</p>
  
  <pre><code>&lt;!--NAVIGATION--&gt;
      &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li id="logo"&gt;&lt;a href="index.html"&gt;&lt;img src="assets/img/jp-logo.png" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="classlist.html"&gt;Class List&lt;/a&gt;&lt;/li&gt; &lt;!--change URL later--&gt;
      &lt;/ul&gt;
  
  #nav{
  list-style-type: none; /*gets rid of bullets*/
  padding: 0;
  border-color: #FFB405;
  border-style: solid;
  border-width: 1px 0;
  text-align:center;
  }
  #nav li{
  display: inline; /*display list horizontally*/
  }
  #nav a{
  display: inline-block; /*don't break onto new lines and follow padding accordingly*/
  padding:10px;
  }
  </code></pre>