csscss-selectors

CSS selector: no <img> as child

I'm trying to select all anchor tags that link to external sites that do not have child image tags. If I have an image as a link, it adds the little external link icon next to those images as well, but I don't want that.

This is what I have so far:

a[href^="http://"]{
  background:transparent url(..icon/external.png) center right no-repeat;
  display:inline-block;
  padding-right:18px;
}

As an added bonus, how would I make it work with "https://" links as well?

Solution

  • This isnt possible with plain CSS. However you could use a bit of jQuery wizardry:

    jQuery:

    $("a[href^='http://']:not(:has(img))").addClass("external");

    CSS:

    a.external {
  background:transparent url(..icon/external.png) center right no-repeat;
  display:inline-block;
  padding-right:18px;
}

    See Demo: http://jsfiddle.net/hKTBp/

    See Demo (including HTTPS): http://jsfiddle.net/hKTBp/1/