CODEWITHSUNDEEP
htmlcsshtml-lists
Anya
Anya

Reputation: 21

css problems with ul list

I am trying to get the last li in my ul list not to show a border. I do want the borders in between everything else. I just want small lines as dividers in between my list. Here is my code:

CSS

 #navcontainer ul li { 
        display: inline; 
        border-right:1px solid #5C5C5C;
        margin-left: -12px;
    }
    #navcontainer ul .last li{ 
        display: inline; 
        border-right:0;
        margin-left: -12px;
    }

    #navcontainer ul li a{
        text-decoration: none;
        padding: .2em 1em;
        color: #5C5C5C;
    }

html

<ul class="qa-list">
    <li>
        <a href="#rewards" title="Rewards">Rewards Questions</a> 
    </li>
    <li>
        <a href="#logging" title="Logging In">Logging In Questions</a> 
    </li>
    <li>
        <a href="#uploading" title="Uploading Photo">Uploading Photo Questions</a>
    </li>
    <li>
        <a href="#enter" title="Entering Supporter Email">Entering Supporter Email Questions</a> 
    </li>
    <li>
        <a href="#fb" title="Sharing on Facebook">Sharing on Facebook Questions</a> 
    </li>
    <li>
        <a href="#letter" title="Printing Donation Letter">Printing Donation Letter Questions</a> 
    </li>
    <li>
        <a href="#tracking" title="Tracking Donations">Tracking Donations Questions</a> 
    </li>
    <li>
        <a href="#privacy" title="Privacy">Privacy Questions</a> 
    </li>
    <li>
        <a href="#gift" title="Supporter "Thank You" Gift">Supporter "Thank You" Gift Questions</a> 
    </li>
    <li>
        <a href="#rog" title="About Reaching Our Goal">About Reaching Our Goal Questions</a> 
    </li>
    <li>
        <a href="#contact" title="Contact Information Questions">Contact Information Questions</a> 
    </li>
</ul>

Can anyone help? Thanks!

Upvotes: 0

Views: 133

Answers (4)

comixninja
comixninja

Reputation: 746

You can target it using the CSS3 selector :last-child.

http://www.w3schools.com/cssref/sel_last-child.asp

#navcontainer ul li:last-child {
/* CSS here */
}

Upvotes: 0

FahimMurshed
FahimMurshed

Reputation: 207

Try This:

#navcontainer ul li:last-child{ 
    display: inline; 
    border-right:none;
    margin-left: -12px;
}

Upvotes: 0

dpk2442
dpk2442

Reputation: 701

Try this:

#navcontainer ul:last-child {
    border-right: 0px;
}

Upvotes: 0

Brian Warshaw
Brian Warshaw

Reputation: 22984

Try this for the .last:

border-right: none;

Also, it doesn't look like you have the .last class applied to any of the li elements. Additionally, if you do apply it, you'll need to change your selector so that it reads li.last, rather than .last li.

CSS:

#navcontainer ul li.last
{
   ...
   border-right: none;
   ...
}

List item:

<li class="last">
   <a href="#contact" title="Contact Information Questions">Contact Information Questions</a>
</li>

Upvotes: 3

Related Questions