CODEWITHSUNDEEP
htmlcss
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

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

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><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;
}

Upvotes: 4

Views: 13692

Answers (3)

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

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><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;
}

Upvotes: 1

omma2289
omma2289

Reputation: 54619

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

Upvotes: 2

0xc0de
0xc0de

Reputation: 8287

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.

Upvotes: 1

Related Questions