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


Tags: html,css,navigationbar

Problem :

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!



Solution :

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

    CSS Howto..

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How to create vertical list of items in CSS?

    How do I check for a css value using jQuery?

    How to make selected file name visible?

    How to move text list items to align with an image list item

    How to pass a css % parameter in javascript/jquery

    How to make css jQuery thumbnail slides loop

    How to get the table (datatable) left aligned?

    How to add the very last border on the sub menu items

    How to set fit-content for width in right side - dynamic content width

    How to dynamically change CSS class of DIV tag?

    How to remove IconTabFilter icons using css?

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to select siblings between 2 tags of same class using CSS

    How to reduce div size in CSS using twitter bootstrap?

    How are CSS properties implemented by different browsers? [closed]

    How do I conditionally apply CSS styles in AngularJS?

    How to change CSS styling from within Angular 2 Component

    How does this wheel menu get the name

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    How do you create a scrolling window over a still background image with CSS?

    How can I make the height of a div section to automatically adapt to the height of its content?

    How to change order of divs in HTML code, for 3-column CSS Layout?

    how to write IE 8 specific css styles

    How to: Reduce font-size if a line breaks

    BackboneJS + HandlebarsJS - how to add image based on css

    How to force a hover state with jQuery?

    How to make a vertically extendable DIV box from this image?

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    how do i get an div to stay in place while text around it gets bigger or shorter