CODEWITHSUNDEEP
htmlcsscss-selectors
Vinith Almeida
Vinith Almeida

Reputation: 1471

Last child selector not working on a navigation menu

I'm adding a separator "|" to every menu item using the :after selector. This adds it to the last element as well. I've been trying to remove that using the :last-child selector and it isn't working.

I'll list my code below and also provide a jsfiddle link.

HTML:

<nav id="nav_bar">
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Company Profile</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</nav>

CSS:

#nav_bar {
    background-color: #debb23;
    height: 45px;
}

#nav_bar ul{
    list-style-type: none;
}

#nav_bar ul li{
    display: inline-block;
    margin: 10px 0;
}

#nav_bar ul li a{
    color: #ffffff;
    text-decoration: none;
    padding: 0 15px;
}

#nav_bar ul li:after{
    content: "|";
    color: #ffffff;
}

#nav_bar ul li:last-child {
    content: none;
}

Here's the jsfiddle link, http://jsfiddle.net/e3x369k0/

I appreciate any help.

Upvotes: 1

Views: 116

Answers (3)

Jon Mateo
Jon Mateo

Reputation: 384

Try This and I've been using this technique in years :)

#nav_bar ul li{
border-right:1px solid black;
}

#nav_bar ul li:last-child{
border-right: 1px solid tranparent;
}

Upvotes: 0

naivists
naivists

Reputation: 33531

You're missing the :after in the last CSS rule. Should be like this: #nav_bar ul li:last-child:after

Upvotes: 1

Marcelo
Marcelo

Reputation: 4435

You are targeting the last li element's content not its :after pseudo element's content.

Change your selector from:

#nav_bar ul li:last-child {
    content: none;
}

to

#nav_bar ul li:last-child:after {
    content: none;
}

Live example: http://jsfiddle.net/5x55emaf/

Upvotes: 2

Related Questions