CODEWITHSUNDEEP
csshtml-listsborder
MrBubbles
MrBubbles

Reputation: 145

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?

Upvotes: 14

Views: 26039

Answers (4)

Mikkel R. Lund
Mikkel R. Lund

Reputation: 2637

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.

Upvotes: 12

FatherStorm
FatherStorm

Reputation: 7183

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

Upvotes: 23

Dave Kiss
Dave Kiss

Reputation: 10495

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

Upvotes: 1

MatTheCat
MatTheCat

Reputation: 18761

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; }

Upvotes: 2

Related Questions