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? — omma2289
– omma2289, Commented Sep 7, 2013 at 5:25
sorry if I haven't understood your question, but can't you just style like #logo > a {border: none;}? — Harry
– Harry, Commented Sep 7, 2013 at 5:26

Community · Accepted Answer · 2017-05-23 12:28:01Z

2

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

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Sep 7, 2013 at 5:46

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

0xc0de · Accepted Answer · 2013-09-07 05:30:14Z

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 7, 2013 at 5:30

0xc0de

8,3575 gold badges52 silver badges78 bronze badges

Comments

Vikas Ghodke · Accepted Answer · 2013-09-07 05:53:26Z

1

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

edited Sep 7, 2013 at 5:53

answered Sep 7, 2013 at 5:29

Vikas Ghodke

6,6635 gold badges30 silver badges38 bronze badges

4 Comments

omma2289 Over a year ago

you should add an explanation of the changes you made, also I wouldn't use negative margin to fight the space between the blocks

omma2289 Over a year ago

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

Vikas Ghodke Over a year ago

@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.

omma2289 Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related