How to customize target element embedded in HTML / CSS code?

Question

I want to target a specific item and any properties that I set on the logo will override the other items listed. For example, I have a border style that is solid, and it goes through all of the #nav elements listed. I just want to make the logo link a link to an exception. The logo is located right in the middle between the portfolio and the projects. How to do it?

<!--NAVIGATION--> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li id="logo"><a href="index.html"><img src="assets/img/jp-logo.png" /></a></li> <li><a href="projects.html">Projects</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="classlist.html">Class List</a></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 suppose the problem is with removing the border from the logo than with targeting an element, because it has an identifier, so targeting is as simple as #logo .

The first thing you need to do to exclude the logo from the border is to apply the property to the list items instead of the <ul> container, after which you simply redefine the style in the 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 come up and apply these styles, you will notice a gap between the elements of the list, this is caused by the display:inline-block property and the space in the HTML markup, you can check this answer for several ways to properly manage this.

Here is a complete description of the solution in jsFidlle

Answer 2

Tick Fiddle

Give border-top and border-bottom you li and customize your #logo with border:none; This will solve your problem. And for the gap that you see between the li elements, this can be solved by setting the parent elements font-size:0; and then define font-size:npx for your li element.

HTML

 <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li id="logo"><a href="index.html"><img src="http://placehold.it/50x50/" /></a></li> <li><a href="projects.html">Projects</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="classlist.html">Class List</a></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; } 

Answer 3

You can do

 #nav > #logo a 

This corresponds to an element with an id logo, an <a> tag, and children of an element with id nav

Or even

 #logo a 

.