How Do I Cancel Out A CSS Property?

Question

The page I am working on has many different CSS files attached to it, a boostrap.css, the master.css and a custom.css file.

I'm trying to remove a property, as I don't want there to be a a:hover property on the link in a menu. The master CSS file has

#topSurround a:hover {
    color: #ffffff;
}

The bootstrap CSS file has

.nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

I don't want to edit these files, as they are core files with the template I am using and could be updated, so I am using a custom CSS file. Normally, I would set the property to default to override any previous uses of the property.

#topSurround a:hover {
    color: none; (doesn't work, as this isn't the correct default)
}

So, two questions: What is the default value for the color property (there doesn't seem to be one)? Is there an easier way to go about this without having to overwrite the core files?

Answer 1

To cancel out the property you can use unset keyword.

So, in you custom css file you can do something like following:-

#topSurround a:hover {
    color: unset;
}

According to the MDN Web Docs:-

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.