CODEWITHSUNDEEP
htmlcsscss-selectors
Alex
Alex

Reputation: 657

CSS selector for non-html attributes

I know for standard html attributes there are CSS selectors: span[class="example"]

But I would like to know if there are selectors for CSS attributes, e.g. span[background-image].
?

Update:
After reading some of the comments and answers so far, I better give a reason for this "strange" need. I would like to find all elements that have background-image set to anything other than undefined/empty, to apply style to them. The assumption is that I cannot control the existing inline/global styles, only add my own global style sheet.

Upvotes: 2

Views: 237

Answers (3)

Oleg
Oleg

Reputation: 24988

No.

It would be too expensive a rule for the browser to look up. As you are most likely setting the background-image in other css classes, it would be fairly straightforward to target them explicitly (also, not by using span[class="example"] but span.example instead)

Also, as you noted in the comments to another answer, rules of the type

span[style*="background-image"]​{}​

would only apply to inline styles, and you're in for a nightmare if you're looking them up by value like so

span[style*="background-image: url(potato.png)"]​{}​

Is the background set explicitly or through a shorthand property like background:#fff url(potato.png); Did I enter a space there or not? Capitalization, maybe it's .PNG?

Upvotes: 0

4b0
4b0

Reputation: 22323

Try inline css method.

span[style="background-image:url('YourImagePAth')]

Upvotes: 0

bookcasey
bookcasey

Reputation: 40433

You could check for inline styles:

span[style*="background-image"]​{}​

Demo

Upvotes: 1

Related Questions