CODEWITHSUNDEEP
htmlcssnavigationbar
Bob
Bob

Reputation: 41

How do I remove the last border on my nav bar?

I have a website, the nav bar currently looks like

Home | News | About Us |

How do I remove the line after "About Us"?

HTML

<nav>
    <ul>
        <li> 
            <a href="index.php">HOME</a>
        </li>
        <li> 
            <a href="news.php">NEWS</a>
        </li>
        <li> 
            <a href="aboutus.php">ABOUT US</a>
        </li>
    </ul>
</nav>

CSS

nav {
    float:right;
    clear:right;
    width:40%;
    margin:0;
    margin-top:30px;
    margin-right:8%;
}

nav ul {
    margin: 0;
    padding: 0;
    font-family: Microsoft Yi Baiti;
}

nav ul li{
    list-style: none;
}

nav ul li a{
    text-decoration: none;
    float: left;
    display: block;
    padding: 10px 30px;
    color: black;
    border-right: 1px solid #ccc;
}

nav ul li a:hover {
    transition: all .2s ease-in;
    color: rgb(204,204,204);
}


nav li.last {
    border: none ;
}

The last line in CSS I attempted to remove the border, but it unfortunately does not work. Can anyone help? Thanks!

Upvotes: 0

Views: 2069

Answers (2)

wmeade
wmeade

Reputation: 359

Use the :last-child pseudo class on your li and target the anchor tags.

Like so:

nav ul li:last-child a{
    border-right: none;
}

Upvotes: 3

AtheistP3ace
AtheistP3ace

Reputation: 9691

You have the border on the a tag not the li. Also li does not have a class of last so use :last-child. You want to target it like this:

nav li:last-child a {
    border: none;
}

Fiddle: http://jsfiddle.net/pqe9hc6y/

Upvotes: 3

Related Questions