Performance issues aside, is it possible to use a style as a selector? For example, something like:
div[background-image="img/someimg.jpg"] {opacity:.5} My fallback plan is to use javascript and iterate over divs (adding a class when found), but this might end up being even more expensive given that the page is highly dynamic, and I'm not in control of the divs being added.
From the W3C page on Attributes:
CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document.
Attributes are the things defined from the HTML code itself, like id, class, src, href, etc.:
<a id="foo" href="bar">Foo</a> Unless you specifically defined the style from within a style attribute, like this:
<div style="background-image: url('img/someimg.jpg');">Foo</div> You can't do anything with CSS.
If you did do it inline, you could try this selector:
div[style="background-image: url('img/someimg.jpg');"] { /* ... */ } Now that you're worried about performance, you can try using pure-JS to do this (untested):
var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { var current = divs[i]; if (current.style.backgroundImage == "url('img/someimg.jpg')") { current.style.opacity = 0.5; // You'll need more hacks for IE... } } I'd suggest manipulating CSS classes rather than individual styles in this case. For example:
div.some-img { background-image: url('img/someimg.jpg'); } div.some-img-fade { opacity: 5; } ......
$('div.some-img').each(function() { $(this).addClass('some-img-fade'); }); Even if there are a lot of styles, you can do this by using the asterisk as seen here, so this code:
div[style*="box-sizing: border-box;"] { background-color: #ffffe0; } easily matches this HTML:
<div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, " courier="" new",="" monospace;="" font-size:="" 12px;="" color:="" rgb(51,="" 51,="" 51);="" border-top-left-radius:="" 4px;="" border-top-right-radius:="" border-bottom-right-radius:="" border-bottom-left-radius:="" background-color:="" rgb(251,="" 250,="" 248);="" border:="" 1px="" solid="" rgba(0,="" 0,="" 0.14902);="" background-position:="" initial="" initial;="" background-repeat:="" initial;-en-codeblock:true;"=""><div><font style="font-size: 14px;"><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(54, 86, 138);">func</span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);"> doThis(thing: </span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(195, 89, 0);">AnyObject</span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);">) {</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">}</span></font></div> <div><font style="font-size: 14px;"><br></font></div> <div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(54, 86, 138);">func</span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);"> doThisThing(thing thing: </span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(195, 89, 0);">AnyObject</span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);">) {</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">}</span></font></div></div>