Apply CSS property only if it overrides, else, do nothing

Advertisements

Is it possible to only apply a CSS style if it overrides another? In the case that it does not override, it should not apply itself.

<svg ... />
<svg fill="#fff" ... />

How would you go about only modifying the fill property if it is defined? Is this possible through only CSS?
Thanks

I have tried using !important to override the property in case it is in-line but I am unable to get the property to apply conditionally.

>Solution :

Try using attribute selectors, and perhaps also attr() to get what the value is:

svg[fill] {
    fill: attr(fill);
}

Leave a Reply Cancel reply