6

I have element that I want to hide if the background-color property has specific url provided to it (namely default image - copied from HTML that I have no control over : style='background-image: url("assets/images/default_logo.png");')

Is there a way to query for this specific case with CSS?

Concrete example: 

<div class="module-logo"
     ng-show="!show_loading &amp;&amp; module_logo != ''"
     style="background-image: url(&quot;assets/images/default_logo.png&quot;);"
     aria-hidden="false">
</div>
zmii
  • 4,123
  • 3
  • 40
  • 64
  • 1
    Have you looked into [css attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)? – Jeff Aug 10 '17 at 13:46
  • @jeffaudio yes, but this was a time ago and exact matching didn't work out of the box. but this would help indeed. – zmii Aug 10 '17 at 13:48

2 Answers2

7

Yes, you can select that div with this:

div[style^="background-image: url"]

It might require you to use CSS escape characters, which can get messy, so you can alternatively use two sets of selectors to check for the substrings that target exactly what you're looking for. Example of something that would work here:

div[style*="background-image: url("][style*="default_logo.png"]
yoursweater
  • 1,883
  • 3
  • 19
  • 41
  • How would this match exact url? you code matches only whose value is prefixed (preceded) by `background-image: url` and there is no specific url anywhere. – zmii Aug 10 '17 at 13:51
  • You can simply add in the exact URL and it will match more specifically, although you will have to use escape characters to avoid the issues with using & and ; in the selector – yoursweater Aug 10 '17 at 13:56
1

I've found in this post CSS selector by inline style attribute that I can create selector like this

div[style*="default_logo.png"]

basically select it like this:

document.querySelector('div[style*="default_logo.png"]')

N.B. Note as this is highlighted in this post that this is extremely fragile and sensitive for changes all changes. Extra space will break it.

zmii
  • 4,123
  • 3
  • 40
  • 64
  • 5
    You should vote to close your own question as a duplicate rather than posting a self-answer linking to the question. – BoltClock Aug 10 '17 at 13:49