Use CSS to style element if background inline styling - html

Question

consider following HTML and CSS:
I have the second element background set to red with inline styling. How can I style the element with the background:red? I know I can do :nth-child(2), but it is dynamicly different each time?
<div class="titleBox">
<button>Click meh!</button>
</div>
<div class="titleBox" style="background:red">
<button>Click meh!</button>
</div>
<div class="titleBox">
<button>Click meh!</button>
</div>
.titleBox {
width:200px;
height:200px;
float:left;
border:1px solid;
opacity:.5
}
So.. if style="background:red", make the opacity equal 1
thanks! http://jsfiddle.net/kM27C/

Answer 1

Just check whether the attribute exists
Doesn't work properly in IE, but it does if you just check for the existence of the style attribute:
.titleBox[style] {
Exact matching attribute selector
Use the attribute selector:
.titleBox[style="background:red"] {
Demo-fiddle (http://jsfiddle.net/Empgz/) works fine for Chrome, but not for IE. Apparently IE parsed the style, adds some formatting, and then requires the selector to follow that formatting. I inspected the element, saw style="background: red;" (with space and semi-colon), so I tried this, which works in IE:
.titleBox[style="background: red;"] {
So, you could add both to your CSS, so it matches any:
.titleBox[style="background:red"],
.titleBox[style="background: red;"] /* For IE */ {
/* properties go here */
}
It's dirty, of course, but if you cannot change the HTML, you'll sometimes have to do something like this. If you can change your HTML, remove the inline style and change it for a class.
More special attribute selector (starting with or contains)
There is also the ^= operator, using which you can check whether an attribute starts with a value:
/* Any background setting */
.titleBox[style^=background] {
opacity:1;
}
Demo: http://jsfiddle.net/g7SZ5/1/
See also The Skinny on CSS Attribute Selectors on CSS-tricks.com for more of such operators.