Grow your CSS skills. Land your dream job.

Question re: advanced CSS selectors

  • # May 15, 2008 at 2:07 pm

    I’m designing a page where all text links need to have a little icon next to them to help denote that they’re links. So my CSS (simplified) looks like this:

    Code:
    a {
    background-image: url(‘link.jpg’);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 10px;
    }

    The padding-left bumps the text over so that it isn’t sitting on top of the link icon.

    The problem is that sometimes I have other icons that are contained in links (like, for example, a document icon denoting a download), but I don’t want the link.jpg icon next to it. In such a case, my HTML looks like this:

    Code:

    Is there any type of CSS selector where I can say, "if an image is contained by a link, style that parent link like X?"

    I realize that I could just make a separate class that doesn’t have the background image and apply it to every link that contains an image, but it would be much cooler if this could be done automatically. Is it possible? Does anyone know? :lol:

    # May 15, 2008 at 2:33 pm

    That is what CSS qualified selectors are all about:
    http://shauninman.com/archive/2008/05/0 … _selectors

    Unfortunately, this isn’t even likely to become part of the spec, so not gonna help you there.

    jQuery has a :has() selector that functions in much the same way that could probably help you, if you are already using jQuery or would be willing to.

    # May 15, 2008 at 5:09 pm

    Wow…how did you find that page? Not only does he describe my problem exactly (with the same example of an image inside a link, no less), but his proposed syntax (a < img) is actually what I was thinking you should be able to do!

    I’ll definitely check out the jQuery solution since I’m already using that anyway (for Thickbox functionality). I came across this page in the comments: http://ejohn.org/blog/qualified-selectors-in-jquery/ – it shows you how to use jQuery’s :has(); to pull the effect off, but goes a step further and lets you call it through Shaun’s proposed syntax. Thus you could write "a < img" and it would work how he proposed. Awesome!

    Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".