Setting filter brightness of parent without affecting child element

Question

Is there a way to achieve the effect of setting CSS filter: brightness() on an element without it also affecting specific / all (does not matter) child elements?

Consider the following example:

function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', `brightness(${1.0/bright})`);
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
  setBrightness(bright);
}, 50);

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: table-cell;
  text-align: center;
  /* normally middle but set to top to not obscure background for this example: */
  vertical-align: top; 
}

.icon1 {
  background-position: -141px -54px;
}

.icon2 {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  display: inline-block;
  font-family: sans-serif;
  font-size: 8pt;
  width: 50%;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

Here, I've got a span inside a div (class icon) and I'm setting the filter brightness on the div's like so:

$('.icon').css('filter', `brightness(${bright})`);

However, I'd like it to only affect that background, and not affect the little "indicator" span. That is, in the above snippet, the icon should be pulsing but the foreground indicators and their red/green backgrounds should remain unchanged. The only things I thought of to try failed:

function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', `brightness(${1.0/bright})`);
}

Also, it's important that I not make changes to the following:

Cannot change background-* CSS properties.
Cannot change structure of HTML, the span must remain a child of the div.

I don't actually need a solution that omits all child elements, by the way. I only need a single given child (those spans) unaffected, as the structure I'm working with does not have multiple children under each div; the example is representative. Not sure if that matters.

Is there a way to do this?

Setting filter brightness of parent without affecting child element

1 Answers