Select element with certain style?

Question

Is it possible to select an element with certain style using CSS? Like... all img that has style="position:fixed;"

What I mean is - selecting elements depending on their style instead of class or id.

`img[style="position:fixed;"]` @JoshC... but I doubt that's really what the OP needs. — Wesley Murch, Oct 07 '13 at 16:51
Is this style defined in the html itself, or are you trying to do it based on other CSS rules? — Gray, Oct 07 '13 at 16:51
with javascript yes it is possible, but that will be too much to do, going through each element and geting their [computed style](http://stackoverflow.com/questions/6134471/using-elements-that-are-added-to-an-array-with-document-getelementbyidid/6134501#6134501) but what are you trying to accomplish really? — Ibu, Oct 07 '13 at 16:52
@WesleyMurch Cool that works - assuming you use the `style` attribute.. It seems to be exactly what the OP wants.. http://jsfiddle.net/BJeXM/ — Josh Crozier, Oct 07 '13 at 16:54
@JoshC Notice though how picky you need to be: http://jsfiddle.net/BJeXM/1/ — Wesley Murch, Oct 07 '13 at 16:55
@WesleyMurch Yes, it get differences like `#f00` != `#ff0000`. It seems to be a string comparision indeed. — DontVoteMeDown, Oct 07 '13 at 16:57

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

I'd actually use that one:

[style~="position:fixed;"]{
  /* whatever */
}

See the explanation here

so it'll catch all elements that have position:fixed; in their style (because they may have other styles attributes as well)

But if that position attribute is not written in the HTML, the selector will not select them. you will have to use JQuery for that. Read here

edited May 23 '17 at 10:31

Community

1
1

answered Oct 07 '13 at 17:10

avrahamcool

13,888
5
47
58

is it different that the other answers? I'm trying to understand the difference between style~= and style= – Mia Oct 07 '13 at 18:07
1

`=` means that the style equals exactly the value, where `~=` means that the style contains the value. see the difference in action [here](http://jsfiddle.net/avrahamcool/KCvgL/1/) – avrahamcool Oct 07 '13 at 18:13
http://jsfiddle.net/T4guf/ what am I doing wrong here? – Mia Oct 07 '13 at 18:21
1

you have spaces in the string. see [that](http://jsfiddle.net/avrahamcool/HvZCL/1/) – avrahamcool Oct 07 '13 at 18:26

score 1 · Answer 2 · answered Oct 07 '13 at 16:56

1

You can use

div[style="position:fixed;"] {
    color:red;
}

to select all elements like this

<div style="position:fixed;">
</div>

But be careful, you have to take the statement style="position:fixed;" exactly that way into your selector. Even if you omit the ; or add a blank space (position: fixed) it won't lead to your desired result anymore.

answered Oct 07 '13 at 16:56

Gottlieb Notschnabel

9,408
18
74
116

3

The semicolon makes all the difference. You need that semicolon in the markup for the selector to match. – BoltClock Oct 07 '13 at 16:58
Oh yeah, I changed that. – Gottlieb Notschnabel Oct 07 '13 at 16:59

score 1 · Answer 3 · answered Oct 07 '13 at 16:56

You can use the attribute selector:

[style="position:fixed;"]{
  /* whatever */
}

Here's a demo: http://codepen.io/anon/pen/EvfDi

If you want to select each element with a style='position:anything', I would take a look at the w3c spec on css3 attribute selectors: http://www.w3.org/TR/css3-selectors/#attribute-selectors

Select element with certain style?

3 Answers3