CSS selector: no <img> as child

Question

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?

Answer 1

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/