Search code examples
csshtml-listsborder

CSS ul li: Avoiding double borders

I have a UL with 

border: 1px solid grey;

it contains several LIs with

border-bottom: 1px dotted grey;

to keep the items apart visually. But now the last LI has the dotted border and the UL solid border! This looks annoying. How can I avoid that? Is there a way to put borders between LIs instead of after them?

Solution

  • CSS3 selectors can target :first-child or :last-child, like this:

    ul {
    border: 1px solid grey;
}
li {
    border-bottom: 1px dotted grey;
}
li:last-child {
    border:none;
}

    A working example: http://api.fatherstorm.com/test/4165384.php