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
– BoltClock, Commented Jan 3, 2013 at 13:26

Dan · Accepted Answer · 2013-03-29 06:34:52Z

62

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

answered Mar 29, 2013 at 6:34

Dan

10.4k7 gold badges40 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simone · Accepted Answer · 2013-01-03 13:19:35Z

28

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

However this is ugly.

answered Jan 3, 2013 at 13:19

Simone

21.6k15 gold badges84 silver badges112 bronze badges

4 Comments

David Thomas Over a year ago

And fails, unless the style string is an exact match.

Martyn Chamberlin Over a year ago

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.

Vlad Over a year ago

I've had a case where IE ignored such a rule.

user3108698 Over a year ago

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.

Nathan Shanahan · Accepted Answer · 2015-08-25 01:15:58Z

10

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;
}

answered Aug 25, 2015 at 1:15

Nathan Shanahan

1011 silver badge2 bronze badges

Comments

Jerome Cance · Accepted Answer · 2013-01-03 13:18:50Z

2

use :

p[style] span {
  color: red;   
}

answered Jan 3, 2013 at 13:18

Jerome Cance

8,20312 gold badges55 silver badges107 bronze badges

Collectives™ on Stack Overflow

CSS selector for element within element with inline style?

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related