SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different style depending on child element

    Hi I would like to know if there is a way to style an li based on the presence or not of an <a> child element.

    e.g. <li>text</li> would have a black bullet

    but

    <li><a href="#">text</a></li> would have a blue bullet

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It sounds like you are wanting a parent selector but that can't be done with CSS. It could be done with JS but other than that your best bet would be to set up some classes.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you could CHEAT.

    If the content is inline, by wrapping a span directly within the anchor and giving the anchor a display block. now you can style like this

    li a {display:block ; +rules for when there is an a }
    li a span{INLINE rules you would have used on the anchor}

    keep in mind this only works if the content with anchor is inline .. you cant do: li a a{} as it's not valid HTML... yet.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would be better off adding classes to achieve the effect but it could be done automatically like this.

    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.bullet {
        list-style:disc;
        margin:0 0 1em;
        padding:0 0 0 2em;
    }
    .bullet li {
        color:#000;
        margin:0 0 2px;
    }
    .bullet li a {
        display:list-item;
        list-style:disc;
        color:blue;
        position:relative;
        background:#fff;
    }
    /* ie6*/
    * html .bullet li a{
        zoom:1.0;
    }
    
    </style>
    <!--[if gte IE 8]>
    <style type="text/css">
    .bullet li a{float:left;clear:left;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <ul class="bullet">
        <li>List Black Bullet test</li>
        <li>List Black Bullet test</li>
        <li>List Black Bullet test</li>
        <li><a href="#">** Blue Bullet test **</a></li>
        <li>List Black Bullet test</li>
        <li>List Black Bullet test</li>
        <li>List Black Bullet test</li>
    </ul>
    </body>
    </html>
    The anchor is turned into a list item also and therefore its blue bullet sits on top of the black bullet and gives you the effect you were looking for

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I particularly like the line: With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with.

    ... as though giving people Frontpage, Dreamweaver, JQuery, Javascript, XHTML, CSS and every other web development tool available didn't give people plenty of opportunities to stuff up their sites. Web development should not be about catering for the lowest common denominator, it should not be about catering for people who can neither write correct code nor be bothered to look at the results of what they have written, it should be about extending the capabilities of what we can do, and a parent selector would do this.

    I do take the point about performance issues in pages with content dynamically added or removed.

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excellent solution as usual Paul, thanks!

    an interesting discussion on css-tricks, as long as there are alternatives I have no need for parent selectors, although I agree that the fact that some people may use them wrongly does not mean they shouldn't be considered.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    As Paul's code shows, a lot of times you can say something else that gives you the same effect. But I'd still like some parent selectors. : )


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
  •