[ACCEPTED]-CSS ul li: Avoiding double borders-border

Accepted answer
Score: 23

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 1 working example: http://api.fatherstorm.com/test/4165384.php

Score: 12

A smooth solution is to use the plus (+) selector to style 4 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 3 an extra selector and are able to keep the 2 code more clean. Though depending on your 1 needs you might want to check browser compatibilty first.

Score: 2

Use a class or the CSS3 selector :last-child to remove 1 the last <li> border-bottom

ul li:last-child { border-bottom:0; }

or

<ul>
    <li>1</li>
    <li>2</li>
    <li class="last">3</li>
</ul>

ul li.last { border-bottom:0; }
Score: 1

Just add a different class to the last li which 1 specifies to not show a border.

More Related questions