Is there a CSS selector to select this element by its inline style attribute value?
<div style='display:block'>...</div>
something like
div[cssAttribute=cssValue]
Add a comment
|
4 Answers
The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector:
div[style*="display:block"]
It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you have a space somewhere in the attribute value, like this:
<div style='display: block'>...</div>
It won't match until you change your selector to accommodate the space. And then it will stop matching values that don't contain the space, unless you include all the permutations, ad nauseam. But if you're working with a document in which the inline style declarations themselves are unlikely to change at all, you should be fine.
Note also that this is not at all selecting elements by their actual specified, computed or used values as reflected in the DOM. That is not possible with CSS selectors.
27 Comments
BoltClock
Even if it's required, too bad, there isn't a real solution for this.
andersand
I'll give you an example of when this is useful. I'm writing a Selenium Web Driver test and canno't/would not like to alter the actual code in test. I need to identify a specific autocomplete (there are several hidden) by style display, as the code does not provide unique id's or parent structure - they are dumped to <body> in the callback presumably. But yeah, it's fragile like you point out.
Jag
I've found it EXTREMELY REQUIRED if using hte google translate bar on your page as it adds a fixed div to the top of our page - and our nav is already fixed. This technique allows us to move our nav bar depending if the translate bar is visible or not. The translate bar has static classes and the only thing that changes is its display style.
rektide
The shock BoltClock expresses ('Not sure why in the world you'll want to do this sort of thing') is incredibly sad. The question- what is green on this screen- is one that I think many people might want the answer to. The CSSOM's failure to make a declarative ruleset expose it's application in turn declaratively (and queriably) is idiocracy in the extreme. Styles need to be searchable, of course.
BoltClock
@andersand: After just about enough comments on my answer I finally got around to updating it. I hadn't thought about Selenium when writing my original answer and I agree it is one of the most prominent use cases for inline style attribute selectors.
|
Including ";" works better for me.
div[style*="display:block;"]
2 Comments
alexandre-rousseau
This is because the attribute
style must exactly match to the HTML property
Maxie Berkmann
@RousseauAlexandre Adding ";" to the selector makes no difference at least when I tried on an element with ";" in it and not in the selector. As long as the characters and spaces are the same, it's unnecessary to include
;.Always look how the attribute is written in HTML (you can check it in the Elements tab in the browser). You have to use the exact same value. In my case: style="left: 100%;". And not style="left:100%" or anything like that.
Comments
I just checked in the project and the only thing I could find that worked is the exact class description: [style="display: block;"].
1 Comment
Yunnosch
Please understand that there is no "above" on StackOverflow, because the display order is individually configurable. With the one I for example chose, your post is the topmost answer. If you indeed mean the question you should phrase "rules in the question". If you mean one of the answer, please use the link provided by "Share" beneath it. If you mean all the existing answers it gets tricky, because you do not know what other answers will be added. Better phrase without referencing something in existing answers or anything that means "no other answer".