CSS Selector based on background-image

edited April 2014 in Style Development
Hi everybody

I got curios about writing a CSS rule that is based on the background-image

I want to selected the property if it is a gif

Generic selector: a[href$=".gif"]

I want to apply it to background-image.. I have tried a few variation but havent been able to get it right.

body[background-image$=".gif"] body.style[background-image$=".gif"] body[backgroundImage$=".gif"]


Any ideas?
Thanks in advance
:)

Comments

  • The css attribute selector you are trying to use only works with HTML attributes (seen in the left pane in Chrome inspector and Firefox built-in inspector, and DOM node pane of Firefox DOM Inspector.

    background-image is a css property. The only time you could use it in an attribute selector is if you have a web page with something like this HTML:
    <body style="background-image: url(example.gif);">
    style is an html attribute, you could use
    body[style*=".gif"]{...}
    but it would be very unusual for background-image to be applied inline like this. If it is applied in a style element or stylesheet like this it won't work:
    body{background-image: url(example.gif);}
  • Thank you freecyber

    It is actually applied as an attribute of body (inline style) and not in the CSS

    I can easily get to it in a GM script (which I do) but I got curios to see if that is possible to do via style in Stylish.

    Thank you for
    body[style*=".gif"]{...}

    It didn't occur to me

    :)
  • edited April 2014
    CSS specificity won't work in this case since inline style is the highest specificity,
    so you must add !important rule in your CSS to override inline style of an element.
    body[style*="example.gif"] {
    background-image: url(another.gif);
    }
  • Thanks LouCypher

    Yes, I have added !important rule
    :)
Sign In or Register to comment.