Applying CSS by referencing an external hot linked image hosted on a different website

Question

This is not a duplicate question because I am trying to override css of a external image with a href value.

I have this external image put all over a wordpress website but I cannot figure out a way to change image width with css. The problem is I cannot alter the code here.The "wpd_wrapper" class is used on other places on the website as well.

I want to make the image width 110px

<div class="wpb_wrapper">
    <a href="https://geo.itunes.apple.com/us/album/nuh-strange-face-single/id392890270?at=11lSfu&amp;mt=1&amp;app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:162px;height:40px;"></a>
</div>

I have tried selecting the image with [attribute] like below. But it is not working. What Am I doing wrong here?

img[url*="badge_music-lrg.svg"] {
    width: 110px !important;
}

You might be screwed there, everything I tried actually caused the background image to not load. — VikingBlooded, May 12 '16 at 18:52
@VikingBlooded I added some code I used before. There I try to select the image by name using the attribute. However it is not working either. — MaxE, May 12 '16 at 19:14
I tried this and it doesn't work either a[href$='badge_music-lrg.svg'] { width: 110px !important; } — MaxE, May 12 '16 at 19:27
because you are targeting an image, it's not an image, it's a background-image. — VikingBlooded, May 12 '16 at 20:26
@Quentin this is not a duplicate as he is asking a very specific question about targeting an element in a specific way. Not about precedence — VikingBlooded, May 12 '16 at 20:29
Thank you @VikingBlooded ! But does not work either. However I was able to fix it. I am going to add the answer here. — MaxE, May 13 '16 at 07:54

score 1 · Answer 1 · answered May 12 '16 at 20:33

1

It isn't an <img> so the img type selector won't match.

It doesn't have a url attribute, so your attribute selector which looks for url=something won't match.

Target something that is there. It is an <a> element and it has a style attribute.

answered May 12 '16 at 20:33

Quentin

914,110
126
1,211
1,335

Thank you Quentin and @VikingBlooded Here I matched an a element with style attribute that has 'badge_music-lrg.svg' anywhere in it. – MaxE May 13 '16 at 07:45
a[style*='badge_music-lrg.svg'] { width: 110px !important; } – MaxE May 13 '16 at 07:51

score 0 · Accepted Answer · answered May 13 '16 at 07:57

0

I followed @Quentin's directions and came up with the answer

a[style*='badge_music-lrg.svg'] {
width: 110px !important;
}

answered May 13 '16 at 07:57

MaxE

57
6

Applying CSS by referencing an external hot linked image hosted on a different website

2 Answers2