CSS selector by inline style attribute

Asked 8/12, 2011 at 6:5 Answered 31/3, 2023 at 11:4

Solved html css css-selectors inline-styles

163

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]

Comitative answered 8/12, 2011 at 6:5 Comment(0)

294

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.

Ovalle answered 8/12, 2011 at 6:7 Comment(27)

Even if it's required, too bad, there isn't a real solution for this. – Ovalle 8/12, 2011 at 6:17

if you could tell us why you need to do this then we can probably help out more – Aquanaut 8/12, 2011 at 6: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 ) – Comitative 8/12, 2011 at 6:40

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. – Esbjerg 26/4, 2013 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. – Burgher 8/8, 2013 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; }

– Dicephalous 20/9, 2013 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. – Ovalle 20/9, 2013 at 14:9

You won't believe, but I need selection by style because of inability to dynamically generate css in haml. – Muse 2/12, 2013 at 10:15

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. – Astri 20/5, 2014 at 13: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. – Gigigigli 9/11, 2014 at 22:21

@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. – Ovalle 23/11, 2014 at 6:42

@rektide: I removed that statement, it was clearly over the top. This answer was long overdue for an update anyway. – Ovalle 23/11, 2014 at 6:54

If you, like me, have the Selenium case then the accepter answer in this so post seems far more robust to me. – Placket 31/3, 2015 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 <div style="text-align: left;"> ... </div> 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. – Bondy 20/5, 2016 at 13:12

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. – Willwilla 26/8, 2016 at 7:52

That's amazing and somehow Google found this. I used it in this answer (and reality) here: https://mcmap.net/q/81082/-advanced-css-selector-select-based-on-styling Thx! – Wahkuna 17/8, 2017 at 22:48

Doesn't work AT ALL for me in Codepen using MacOS + Chrome 86 codepen.io/faxanadu/pen/gOMywgN - did I do something wrong or is it just super fragile? – Lantha 17/11, 2020 at 19:7

@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. – Ovalle 18/11, 2020 at 7:58

Thanks for the great answer! just one question, why it seems like it only works for inline css style? For example, jsfiddle.net/caloverys/f8otm4he v.s jsfiddle.net/caloverys/8hjw3k6x. Do you mind kindly take a look? Thank you! There seems no difference betwene the space and wahtever – Latvia 24/2, 2022 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. – Ovalle 24/2, 2022 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! – Latvia 24/2, 2022 at 14:59

@James: Not with a CSS selector. But check out container queries. – Ovalle 24/2, 2022 at 15:0

@BoltClock, sorry, but are you referring to this: 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 – Latvia 24/2, 2022 at 16:21

@Willwilla 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 <div style=“font:10;display:block”> you can select div[style*=“display:block”]. however, I’ve only tested this on Safari (on mobile). – Easterling 5/6, 2022 at 3: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, <div style=“font-weight:bold;display:block”> will still be matched by div[style*=“display:block”] – Easterling 5/6, 2022 at 3: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 <div style=“display:block;display:inline”>, 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. – Ovalle 5/6, 2022 at 8:26

@Ovalle 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. – Easterling 5/6, 2022 at 14:53

Including ";" works better for me.

div[style*="display:block;"]

Groundsheet answered 12/1, 2019 at 7:18 Comment(2)

This is because the attribute style must exactly match to the HTML property – Papain 11/6, 2019 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 ;. – Barn 16/3, 2020 at 14:45

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.

Envoy answered 4/3, 2021 at 9:19 Comment(0)

-1

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

Wylen answered 31/3, 2023 at 11:4 Comment(1)

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". – Afar 1/4, 2023 at 7:32

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags