Q:

CSS attribute selector not working when the attribute is applied using javascript?

.variations_button[style*="display: none;"] + div

This is my CSS selector which works fine if the style attribute is already in the DOM on page load:
http://jsfiddle.net/xn3y3hu0/
However, if i hide the .variations_button div using javascript, the selector is not working anymore:
$(document).click(function(){
    $('.variations_button').hide();
}); 

http://jsfiddle.net/55seee1r/
Any idea whats wrong? Looks like the CSS is not refreshing, because if i edit another property using the inspector, the color changes red instantly. 

A:

Because the selector you use, [style*="display: none;"], is looking for the presence of the exact string of "display: none;" in the style attribute, it requires the browser's JavaScript engine inserts that precise string, including the white-space character (incidentally in Chrome 39/Windows 8.1 it does). For your particular browser you may need to remove the space, and to target most1 browsers, use both versions of the attribute-value string, giving:
.variations_button[style*="display: none;"] + div,
.variations_button[style*="display:none;"] + div

.variations_button[style*="display: none;"]+div,
.variations_button[style*="display:none;"]+div {
  color: red;
}
<div class="variations_button" style="display: none;">asd</div>
<div>test</div>

Of course, it remains much simpler to use classes to hide an element, toggling that class with JavaScript, and using the class as part of the CSS selector, for example:

$('.variations_button + div').on('click', function() {
  $('.variations_button').toggleClass('hidden');
});
.hidden {
  display: none;
}
.hidden + div {
  color: red;
}
.variations_button + div {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations_button">asd</div>
<div>test</div>

As I understand it, the problem of the above not working once jQuery is involved, is because jQuery's hide(),show() and toggle() methods seem to update the display property of the element's style property, rather than setting the attribute directly. The updated attribute-value (as represented in the style attribute) seems to be a representation of the style property (derived, presumably, from its cssText). Because the attribute is unchanged, and merely serves as a representation of a property, the CSS attribute-selectors don't, or perhaps can't, match.
That said, a somewhat clunky workaround is to directly set the attribute; in the following demo this uses jQuery's attr() method (though the native DOM node.setAttribute() would work equally well):
  $(document).click(function() {
    // setting the style attribute of the selected element(s),
    // using the attr() method, and the available anonymous function:
    $('.variations_button').attr('style', function(i, style) {
      // i: the index of the current element from the collection,
      // style: the current value (before manipulation) of the attribute.

      // caching the cssText of the node's style object:
      var css = this.style.cssText;

      // if the string 'display' is not found in the cssText:
      if (css.indexOf('display') === -1) {
        // we return the current text plus the appended 'display: none;' string:
        return css + 'display: none;';
      // otherwise:
      } else {
        // we replace the string starting with 'display:', followed by an
        // optional white-space ('\s?'), followed by a matching string of
        // one or more alphabetic characters (grouping that last string,
        // parentheses):
        return css.replace(/display:\s?([a-z]+)/i, function(a, b) {
          // using the anonymous function available to 'replace()',
          // a: the complete match, b: the grouped match (a-z),
          // if b is equal to none we return 'display: block', otherwise
          // we return 'display: none':
          return 'display: ' + (b === 'none' ? 'block' : 'none');
        });
      }
    });
  });

jQuery(document).ready(function($) {

  $(document).click(function() {
    $('.variations_button').attr('style', function(i, style) {
      var css = this.style.cssText;
      if (css.indexOf('display') === -1) {
        return css + 'display: none;';
      } else {
        return css.replace(/display:\s?([a-z]+)/i, function(a, b) {
          return 'display: ' + (b === 'none' ? 'block' : 'none');
        });
      }
    });
  });

});
.variations_button[style*="display: none;"]+div {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations_button">asd</div>
<div>test</div>

References:

CSS:

Substring Matching Attribute-selectors.

JavaScript:

HTMLElement.style.
JavaScript Regular Expressions.
String.prototype.indexOf().
String.prototype.replace().

jQuery:

attr().
hide().
show().
toggle().

