1

Is it possible to use attribute selectors to partially-search an inline style attribute?

Can anyone find a way to get this bit of code working?

http://jsfiddle.net/v4xPY/1/

It seems that it's not possible to do this .hidden[style*="display: block"] + .below, nor even just [style]

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
joecritch
  • 1,095
  • 2
  • 10
  • 25
  • It is possible, as seen in this example - http://jsfiddle.net/amustill/ypHm5/1 - so something else is coming in to play there. I haven't got the time to debug, but my initial thought is that it's how jQuery is setting the style attribute and that how we see it in the inspector isn't necessarily how the browser does. – amustill Oct 09 '12 at 01:14
  • You should utilize the panels in jsFiddle - it is much more readable than dumping it all in the HTML panel. – Dennis Oct 09 '12 at 01:17
  • Google Chrome is known to have issues with attribute selectors and sibling combinators. – BoltClock Oct 09 '12 at 01:45
  • @BoltClock Do you have an article or anything that supports that? Would just be interesting to see some test cases. – amustill Oct 09 '12 at 01:58
  • I think the problem is actually that you're trying to target an element that doesn't actually have that attribute set on it in the actual html itself, i.e. you're *wanting* to match ` – ultranaut Oct 09 '12 at 02:01
  • @ultranaut: Exactly. Nowhere in the code is an inline style attribute even being set. – BoltClock Oct 09 '12 at 02:03
  • @amustill: There are several fiddles around the site that demonstrate WebKit browsers choking on all sorts of attribute selectors and combinators that IE8 handles just fine: http://stackoverflow.com/questions/6217088 http://stackoverflow.com/questions/6728175 plus some more on attributes + descendant combinators or pseudo-classes or pseudo-elements, etc. Not entirely sure which of those have been fixed. Although I should add that this question doesn't seem to be about Chrome in the first place, so I've removed that particular tag. – BoltClock Oct 09 '12 at 02:08
  • @BoltClock Thanks for the links. It seems as if some of those issues have been fixed in recent versions of Chrome, but it's interesting to see. I rarely use the combination of selectors that these bugs appear in, so hadn't spotted anything particularly funky happening before that I couldn't resolve. – amustill Oct 09 '12 at 02:23

1 Answers1

2

The attribute selector you're trying to use isn't legit CSS, though it is a jQuery attribute selector. As far as I know, CSS is limited to [attribute=value], [attribute~=value] and [attribute|=value]. (derp, see below)

But, since you're already using jQuery to toggle the hidden div, it'd be a lot simpler to just toggle a class on the below div at the same time, rather than wrestling with the attribute selector (unless there's more to it than that).

Modified jQuery:

$(function() {
  $('html').click(function() {
    $('.hidden').slideToggle();
    $('.below').toggleClass('yellow');
  });
});​

and CSS:

/* Margin of Below should reduce when hidden is opened */
.yellow {
  margin-top: 10px; 
  background: yellow;
} ​

Fiddle here.

Edit: Okay, I was way off on the bit about the attribute selectors, it is legit CSS3; I don't know the details on browser support, though I'd guess it'd be supported in all the usual "modern" browsers. Also, there's apparently a problem with IE7 targeting the style attribute specifically. There's a pretty good write-up at http://www.impressivewebs.com/attribute-selectors/.

Once more: Though I can't find anything that explicitly confirms this, it looks like the attribute selectors only apply to attributes that are actually hardcoded into the html; basically it's just parsing strings, not examining the dom elements' "states" as such?

ultranaut
  • 2,132
  • 1
  • 17
  • 22
  • It's a CSS3 attribute selector. http://www.w3.org/TR/css3-selectors#attribute-selectors – BoltClock Oct 09 '12 at 01:43
  • Yep, I realized that and noted it above. – ultranaut Oct 09 '12 at 01:54
  • As for your latest note: yes, they only look at attribute values that are set in the HTML, not the DOM states. That seems to be the issue at large here, since the fiddle code never sets an inline style, so I'd say you now have the right answer. – BoltClock Oct 09 '12 at 01:58