CSS ul li: Avoiding double borders

Question

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?

Answer 1

A smooth solution is to use the plus (+) selector to style the list:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

You just add the following css:

li + li {
     border-top: 1px dotted grey;
}

You avoid adding an extra selector and are able to keep the code more clean. Though depending on your needs you might want to check browser compatibilty first.

Answer 2

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