158

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]
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
AgelessEssence
  • 6,395
  • 5
  • 33
  • 37

4 Answers4

289

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.

BobRodes
  • 5,990
  • 2
  • 24
  • 26
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Even if it's required, too bad, there isn't a real solution for this. – BoltClock Dec 08 '11 at 06:17
  • if you could tell us why you need to do this then we can probably help out more – corroded Dec 08 '11 at 06:19
  • basically i have 10 divs who are show / hidden dinamically and randomly ( by a clicked button ), but i need set specific css style to the first and last visible divs. ( i know there are other ways to do this, but this was the most simple ) – AgelessEssence Dec 08 '11 at 06:40
  • 13
    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 in the callback presumably. But yeah, it's fragile like you point out. – andersand Apr 26 '13 at 13:55
  • A little thread necromancy here: why don't you just set a special class for the special objects, and remove it after it is not special anymore? And why am I here? Because I want to do some z-order magic. Looks like I would need to find another solution. – Robert Aug 08 '13 at 14:27
  • This can be useful with images: `img[style*="float:right"] { margin-right: 6px; margin-left: 40px; } img[style*="float:left"] { margin-left: 6px; margin-right: 40px; } ` – Niklaus Sep 20 '13 at 12:19
  • @Niklaus: I'd argue that more people use `align="left/right"` or use `float: left/right;` in a stylesheet, than use `style="float:left/right"` in the markup, for that to be often useful. – BoltClock Sep 20 '13 at 14:09
  • You won't believe, but I need selection by style because of inability to dynamically generate css in haml. – Nakilon Dec 02 '13 at 10:15
  • 2
    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. – Jag May 20 '14 at 13:01
  • 1
    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. – rektide Nov 09 '14 at 22:21
  • 3
    @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. – BoltClock Nov 23 '14 at 06:42
  • @rektide: I removed that statement, it was clearly over the top. This answer was long overdue for an update anyway. – BoltClock Nov 23 '14 at 06:54
  • If you, like me, have the Selenium case then the accepter answer in [this so post](http://stackoverflow.com/questions/9426182/css-selector-for-elements-with-style-attribute) seems far more robust to me. – Johan Gov Mar 31 '15 at 12:19
  • I use it in a tinymce html-Editor where I edit text variables. I would like to show if the text of the variable is enclosed by
    ...
    or not - because it has an effect in the usage of this variable. Now I can display the left aligned variable with a small frame. Thanks.     – Gio May 20 '16 at 13:12
  • 1
    If you don't know if there may be inline styles with or without a space between property and value, you can also split them up like `div[style*="display"][style*="block"]`. But be careful as to not accidentally select unwanted elements where it matches too, like this example would also match `style="display:inline-block;"` --- Of course it's always better to avoid inline styles at all costs and use classes instead, but in a few specific situations it may still be unavoidable. – Seika85 Aug 26 '16 at 07:52
  • That's amazing and somehow Google found this. I used it in this answer (and reality) here: https://stackoverflow.com/a/45746014/8047 Thx! – Dan Rosenstark Aug 17 '17 at 22:48
  • Doesn't work AT ALL for me in Codepen using MacOS + Chrome 86 https://codepen.io/faxanadu/pen/gOMywgN - did I do something wrong or is it just super fragile? – Drkawashima Nov 17 '20 at 19:07
  • @Drkawashima: It's that fragile. There's a space in the HTML's attribute value, which as my answer explains breaks the selector because the selector isn't expecting a space after the colon. The CSS and HTML in my answer are not expected to work together. – BoltClock Nov 18 '20 at 07:58
  • Thanks for the great answer! just one question, why it seems like it only works for inline css style? For example, https://jsfiddle.net/caloverys/f8otm4he/ v.s https://jsfiddle.net/caloverys/8hjw3k6x/. Do you mind kindly take a look? Thank you! There seems no difference betwene the space and wahtever – James Feb 24 '22 at 14:47
  • @James: The style attribute is an HTML attribute. If you pretend CSS doesn't exist, then the style attribute just becomes a regular HTML attribute with some value, and that's what the attribute selector is looking for. – BoltClock Feb 24 '22 at 14:48
  • So there is no way to select(style) element with specific css style ? Since the answer is a decade ago, is there a way to do it? Thank you! – James Feb 24 '22 at 14:59
  • @James: Not with a CSS selector. But check out container queries. – BoltClock Feb 24 '22 at 15:00
  • @BoltClock, sorry, but are you referring to this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries? is seems that it it used for media query? Correct me if I am wrong please – James Feb 24 '22 at 16:21
  • @Seika85 ty, additionally, I just found the search string can be matched anywhere in the attribute value. the name and value don’t have to be defined at the start of the attribute in the markup. so if you have
    you can select div[style*=“display:block”]. however, I’ve only tested this on Safari (on mobile).
     – 1.21 gigawatts Jun 05 '22 at 03:28
  • if you’re worried about extreme fragility you can add multiple attribute selectors using the comma character div[style*=“display:block”],[style*=“display: block”]. And in my brief tests on mobile it doesn’t matter if values are before or after the search strings. for example,
    will still be matched by div[style*=“display:block”]
     – 1.21 gigawatts Jun 05 '22 at 03:42
  • @1.21 gigawatts: Yeah but that's only 2 of the many (like I said) permutations. You also have to worry about things like
    , which are more common than you might think. No idea how I got logged out of Stack Overflow *in the middle of writing this comment*.
     – BoltClock Jun 05 '22 at 08:26
  • @BoltClock no you’re right. it’s still fragile. i’m offering that as a suggestion since i didn’t see anyone mention using a comma to include more attributes values. – 1.21 gigawatts Jun 05 '22 at 14:53
11

Including ";" works better for me.

div[style*="display:block;"]
jarrodwhitley
  • 826
  • 10
  • 29
Bertrand
  • 119
  • 1
  • 2
  • 4
    This is because the attribute `style` must exactly match to the HTML property – alexandre-rousseau Jun 11 '19 at 12:56
  • @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 `;`. – Maxie Berkmann Mar 16 '20 at 14:45
4

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.

Eugene Ihnatsyeu
  • 1,299
  • 13
  • 15
-1

I just checked in the project and the only thing I could find that worked is the exact class description: [style="display: block;"].

Yunnosch
  • 26,130
  • 9
  • 42
  • 54
Alex Lemeshev
  • 19
  • 4
  • 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". – Yunnosch Apr 01 '23 at 07:32