Today i needed to find a way to target some html elements with css, based on the fact that this element would not have an inline attribute.
Long story short, here’s the line in question (sass): &:not([style*="background-color"])
The case’s scenario:
A features bloc in a blog, with 3 items. Each item can receive a picture as a background or a color and a transparent pattern. On top of the picture, i’d like to add an overlay to help the reading of the text. On the pattern not (for some design reasons).
Here’s a demo of the final effect (best seen on the jsfiddle site):
Basically i’m saying to the browser, if the block doesn’t have any background-color attribute, then create the pseudo element that will serve as a shadow for the text.
Note: images, patterns and colors would being added by some backend service with inline style.