Advanced CSS Selector - Select based on styling

Question

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}
         


        

Answer 1

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.:

Foo

Unless you specifically defined the style from within a style attribute, like this:

Foo

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...
  }
}