CODEWITHSUNDEEP
csscss-selectors
Francis Lavoie
Francis Lavoie

Reputation: 449

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?

Upvotes: 6

Views: 1873

Answers (2)

Katja Süss
Katja Süss

Reputation: 759

With the functional :has() CSS pseudo-class it's easier now:

a[href^="http"]:not(:has(> img))  {
  color: magenta
}

Please note that Firefox has only supported :has since the end of last year. See https://caniuse.com/css-has

Upvotes: 0

Curtis
Curtis

Reputation: 103388

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/

Upvotes: 7

Related Questions