Printable View
I have another list output with a nested <ul> :
I need to have a bottom-margin on the nested <ul's> except the last one. The problem I have is that the content for the nested <ul's> is dynamic, so I never know how many nested <ul's> there will be. What would be the best way to target the last nested <ul>Code HTML4Strict:
Thank you in advange.
If you don't care about IE (up to and including 8), you can use the :last-child pseudo class.
Hi Stevie, I should have told that in my previous post, I don't care about IE6 in this case, but I would like it to work in IE7 and 8 as well. Are there other options available. Or should I in this case do something with the parent <li's>?
How are the lists being generated? The easiest way, if you can, is to slap a class on the last item in the list.Quote:
Originally Posted by donboe
There is no way you can target the last chile with CSS. Either you do it by JS, or put a unique class in the last child manually.
Can't you just hide the last border like so.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
padding:0 0 0 1em;
list-style:none;
margin:0;
overflow:hidden
}
ul ul {
border-bottom:1px solid red;
margin:0 0 -1px 0;
}
</style>
</head>
<body>
<ul>
<li>text
<ul>
<li>text</li>
</ul>
</li>
<li>text
<ul>
<li>text</li>
</ul>
</li>
<li>text
<ul>
<li>text</li>
</ul>
</li>
</ul>
</body>
</html>
If I couldn't put a unique class on a list this method always worked for me, too.Quote:
Originally Posted by Paul O'B