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


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?

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