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?

Jigaboo

Exact Dupe: https://mcmap.net/q/259135/-changing-css-for-last-lt-li-gt – Pruchno

Answer 1

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

Denten

Oh my god, that's brilliant. Thank you. – Jigaboo

note that this will cause problems in IE6 if you have to support this piece of crap – Colorific

Answer 2

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.

Macrophysics

FatherStorm's solution is the most common (and was my own first instinct), but this is more elegant. – Leela

Answer 3

Use a class or the CSS3 selector :last-child to remove 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; }

Kissner

Answer 4

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

Angeliaangelic