Hi,

Can someone please explain the last child concepts in unordered lists? To make the last list item have no border or a different border than the other list items. Here is my html code:

<div id="header">

        <ul class="main_left">
            <li><a href="#" alt="home">Home</a></li>
            <li><a href="#" alt="people">People</a></li>
            <li><a href="#" alt="music">Music</a></li>
            <li><a href="#" alt="video">Video</a></li>
            <li><a href="#" alt="games">Games</a></li>
            <li><a href="#" alt="tv">TV<span class="new"><img border="0" alt="new" src="img/new.png"/></span></a></li>
            <li><a href="#" alt="movies">Movies<span class="new"><img border="0" alt="new" src="img/new.png"/></span></a></li>
            <li><a href="#" alt="topics">Topics</a></li>
            <li><a href="#" alt="more">More</a></li>
        </ul>

        <ul class="main_right">
            <li><a href="#" alt="help">Help</a></li>
            <li><a href="#" alt="sign_up">Sign up</a></li>
            <li><a href="#" alt="login">Login</a></li>
        </ul>

    </div>

I want the last item in main right to not have a border on the right.

and here is the css:

#header {
    background-color:#2c2b2c; 
    width:960px; 
    height:30px; 
    -moz-border-radius: 15px;
    border-radius: 10px;
    margin: 20px 10px 10px 10px; 
}

.main_left {
}

.main_left li{
    float:left; 
}

.main_left li a{
    display:block;
    text-decoration:none;
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    border-right: #000 thin solid;
    padding: 5px 10px 5px 15px;
    margin-top:3px;
}

span.new {
    padding-left:5px; 
}

.main_right {
    float:right;
}

.main_right li{
    float:left;
}

.main_right li:last-child{
    border-right:none;
}

.main_right li a{
    display:block-inline;
    text-decoration:none;
    line-height:30px;
    padding:5px 10px 5px 15px;
    border-right:#FFF thin solid; 
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px;
}

2 answers

PaulBM 103
1
point

Firstly I had to enlarge the height of #header to see the second list fully here. Using Firebug in Firefox I can see that the last-child pseudo selector rule is being applied to the Login list item. But the white border you're seeing is on the anchor element.
So to fix the problem I moved the border-right: #fff thin solid from the li a to .main-right li section. I also added list-style: none; to get rid of the bullets on the list items.

Answered almost 8 years ago by PaulBM
PaulBM 103
0
points

Further to your request for information on nth-child etc. Take a look at the following page. Chris Coyier's CSS-Tricks site is overflowing with useful information.

http://css-tricks.com/9657-useful-nth-child-recipies/

He explains just about everything you're likely to need to know about these selectors.

Answered almost 8 years ago by PaulBM