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}

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.

score 11 · Answer 1 · answered Aug 17 '17 at 22:48

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>

Blender · Accepted Answer · 2011-04-04T06:35:01.223

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

Thanks for the thorough response. I'm actually trying to work with html generated from an API, wherein the styles are inline, and there are a ton of them. I don't think the attribute selector will work, given that I don't know what *other* styles they're going to jam in there. — Matrym, Apr 04 '11 at 07:25
@Matrym see my answer below which solves this problem: https://stackoverflow.com/a/45746014/8047 — Dan Rosenstark, Aug 17 '17 at 22:49

score 1 · Answer 3 · answered Apr 04 '11 at 06:28

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'); });

score 0 · Answer 4 · answered Jun 27 '20 at 04:28

There's something called DOMSubtreeModified which has now been turned into MutationObserver. This can help you watch the dom for when new elements are added:

// identify an element to observe
var elementToObserve = document.querySelector("#targetElementId");

// create a new instance of `MutationObserver` named `observer`, 
// passing it a callback function
var observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});

// call `observe` on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});

This example is copy/pasted from mdn docs: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

Advanced CSS Selector - Select based on styling

4 Answers4

Linked