Question

I have a CSS in a third party css file:

.gallery li > a{
    background-image:url(images/loading.gif);
}

I want to override this so that a different background image is used instead. I have achieved this by using an inline style on the a tag itself and this works but I don’t like inline styles.

I don’t want to change the third party css file in case we one day use an updated version of the css file and lose our changes. I added a new CSS class on the a tag itself and put my new background-image css in a new css file associated with the new css class. For some reason this does not work. Anyone have any idea how to solve this?

Thanks,

Sachin

Answer 1

Specifying higher priority css selector than old one should help

.gallery li > a.my-custom-class {
    background-image:url(myCustomImage);
}