[ACCEPTED]-CSS ul li: Avoiding double borders-border
Accepted answer
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
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.
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; }
Just add a different class to the last li which 1 specifies to not show a border.
Source:
stackoverflow.com
More Related questions
Cookie Warning
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.