How do I target a specific element nested in HTML/CSS code? - html

Question

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 logo an exception to this. The logo is located right in the middle between portfolio and projects. How do I do this?
<!--NAVIGATION-->
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li id="logo"><img src="assets/img/jp-logo.png" /></li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
#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;
}

Answer 1

I assume the problem is more about removing the border from the logo than targeting the element since it has an id, thus targeting is as easy as #logo.
The first thing you need to do in order to exclude the logo from the border is apply the property to the list-items instead of the container <ul> then you just override the style in a following rule:
#nav li{
display: inline-block; /*display list horizontally*/
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
}
#nav #logo{
border: 0;
}
Finally, if you go and apply this styles you'll notice a gap in between your list items, this is caused by the display:inline-block property and the whitespace in the HTML markup, you can check this answer for multiple ways to properly handle that.
Here's a complete demo of the solution in jsFidlle

Answer 2

You can do
#nav > #logo a
This matches with an element with id logo, tag <a> and children of element with id nav
Or even
#logo a
is enough.

Answer 3

Check this Fiddle
Give border-top and border-bottom to you li and target your #logo with border:none; this will solve your problem.
And for the gap you can see in between li elements this can be solved by setting the parent elements font-size:0; and then define the font-size:npx to your li element.
HTML
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li id="logo"><img src="http://placehold.it/50x50/" /></li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
CSS
ul#nav {
margin:0;
list-style-type: none;
/*gets rid of bullets*/
padding: 0;
text-align:center;
font-size: 0;
}
#nav li {
margin:0;
display: inline;
/*display list horizontally*/
}
#nav a {
display: inline-block;
/*don't break onto new lines and follow padding accordingly*/
padding:10px;
border-top:1px solid #FFB405;
border-bottom:1px solid #FFB405;
margin:0;
font-size: 16px;
}
ul#nav li#logo a {
border-top:none;
border-bottom:none;
}