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

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

you have a border for the complete list and you want to remove the border from the logo? — Omar, Sep 07 '13 at 05:25
sorry if I haven't understood your question, but can't you just style like `#logo > a {border: none;}`? — Harry, Sep 07 '13 at 05:26
Do you want something like this ? http://jsfiddle.net/exnxq/1/ — Vikas Ghodke, Sep 07 '13 at 05:27

score 2 · Accepted Answer · edited May 23 '17 at 12:28

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

Vikas Ghodke · Answer 2 · 2013-09-07T05:53:26.200

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

you should add an explanation of the changes you made, also I wouldn't use negative margin to fight the space between the blocks — Omar, Sep 07 '13 at 05:32
`font-size:0` is not advisable either, if one is able to change the HTML markup then removing the whitespce at the source is preferable — Omar, Sep 07 '13 at 05:50
@koala_dev i think it would be good to have font-size:0 , rather than adding html comments in between all the listed list items. — Vikas Ghodke, Sep 07 '13 at 05:54
It's definitely not a good practice, Safari 5 and Android have problems with it but most importantly it breaks any subsequent layout based on `ems` and `%`, I suggest you read the link I posted in my answer — Omar, Sep 07 '13 at 06:03

score 1 · Answer 3 · answered Sep 07 '13 at 05:30

1

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.

answered Sep 07 '13 at 05:30

0xc0de

7,055
4
42
70

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

3 Answers3