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>
​

Answer 1

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

Answer 2

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

However this is ugly.

Answer 3

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

Answer 4

use :

​p[style] span {
  color: red;   
}​