CSS selector for element within element with inline style?

Question

Is there a CSS selector to target elements with inline styles? So can I target the first span but not the 2nd with CSS only?

If not, can this be done with jQuery?

http://jsfiddle.net/TYCNE/

<p style="text-align: center;">
    <span>target</span>
</p>

<p>
    <span>not target</span>
</p>

It depends. Are you only interested in the presence of the inline style attribute, or do you need to select by a specific inline style? Selecting by just merely having the attribute is easy and reliable, but having a specific inline style... not so much, unless you can control the markup. — BoltClock, Jan 03 '13 at 13:26

score 57 · Answer 1 · answered Mar 29 '13 at 06:34

A bit late to the tea party but thought I would share the solution I found & use.

@simone's answer is perfect if you can match the style attribute exactly. However, if you need to target an inline style attribute that may have other inline styles associated with it you can use:

p[style*="text-align:center;"]

"*=" means "match the following value anywhere in the attribute value."

For further reference or more detailed information on other selectors see this blog post on css-tricks.com:

The Skinny On CSS Selectors

http://css-tricks.com/attribute-selectors/#rel-anywhere

score 27 · Accepted Answer · answered Jan 03 '13 at 13:19

27

p[style="text-align: center;"] {
  color: red;
}

However this is ugly.

answered Jan 03 '13 at 13:19

Simone

20,302
14
79
103

6

And fails, unless the `style` string is an *exact* match. – David Thomas Jan 03 '13 at 13:55
1

Plus one for David's comment. If the paragraph has any other styling associated with it then you have to include that in the CSS declaration. – Martyn Chamberlin Jan 09 '15 at 17:05
I've had a case where IE ignored such a rule. – Vlad Oct 15 '15 at 14:30
Check developer's tool in IE, sometimes IE convert styles such as hex color values into RGB values. You need to match those changes as well. – user3108698 Dec 03 '15 at 23:22

score 10 · Answer 3 · answered Aug 25 '15 at 01:15

If you would like to apply styles to a particular rule declaration you can also use style*. This will match all elements that have the inline style, regardless of the value applied.

div[style*="background-image"] {
  background-size: cover;
  background-repeat: no-repeat;
}

score 2 · Answer 4 · answered Jan 03 '13 at 13:18

2

use :

p[style] span {
  color: red;   
}

answered Jan 03 '13 at 13:18

Jerome Cance

8,103
12
53
106

CSS selector for element within element with inline style?

4 Answers4

Linked