Geek asks and answers

CSS selector: no <img> as a child

I am 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 a small external link icon next to these images, but I don't want this.

This is what I still have:

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

As an added bonus, how do I get it to work with "https: //" links?

+5
source share
1 answer

This is not possible with simple CSS. However, you can use a little 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/

+6
source

More articles:


All Articles