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

5
  • 2
    Is the space-character present when JavaScript adds the style? Dec 28, 2014 at 16:10
  • 1
    if it were my code I'd show/hide the element with a class, and use the class in the selector.
    – Pointy
    Dec 28, 2014 at 16:11
  • Of course i tried with the space character. And yes, a class hide/show would be easier, but this is for a WordPress plugin and i don't want to overwrite the core code.
    – passatgt
    Dec 28, 2014 at 17:07
  • Make sure to check the second jsfiddle link, just edited the question, because i pasted the wrong link there.
    – passatgt
    Dec 28, 2014 at 17:38
  • Might be obvious to some, but CSS atrribute selectors ONLY work on inline CSS (i e. this is what the style property returns, CSS atrribute selectors don't work with CSS set by other stylesheets (that is computed CSS)
    – Petr L.
    Feb 14, 2022 at 21:13

1 Answer 1

3

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:

3
  • Sure, i tested with space and without space. As i mentioned in my question, it works without the javascript part. But once the style attribute is added using javascript, it fails to run. Even your example. And sure, toggleClass would be easier, but this is for a WordPress plugin and i don't want to overwrite the core code.
    – passatgt
    Dec 28, 2014 at 17:06
  • Can you reproduce this behaviour with a demo? Because it seems that something (but I don't know, and can't see, what) is being left not. Dec 28, 2014 at 17:26
  • Jeez, sorry, i inserted the wrong link in my question. Check out the second jsfiddle:)
    – passatgt
    Dec 28, 2014 at 17:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.