How to target last child

I have another list output with a nested <ul> :


<ul>
  <li>text
    <ul>
      <li>text</li>
    </ul>
  <li>
</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>

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.

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.


<!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.