SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to target last child

    I have another list output with a nested <ul> :
    Code HTML4Strict:
    <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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    If you don't care about IE (up to and including 8), you can use the :last-child pseudo class.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by donboe View Post
    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.

  5. #5
    SitePoint Enthusiast Acmeous's Avatar
    Join Date
    Oct 2008
    Location
    Kolkata, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>
    Last edited by Paul O'B; Apr 30, 2011 at 13:41. Reason: typo

  7. #7
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Can't you just hide the last border like so...
    If I couldn't put a unique class on a list this method always worked for me, too.
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •