Remove a:hover on a media stylesheet?

How can I delete a style entry stated in the main CSS-file in a media query CSS-file?

For example, I'd like to delete the a:hover entry for use on touch devices.

main.css: a:hover {color:#999999; background:#111111;}

How can I cancel this out in the media.css?

Solution

You can't "delete" CSS rules.¹ The cascade doesn't work that way.

The only way to get your rule to apply only when the media query isn't satisfied is to isolate it in a negated version of the query, either in a @media block within your main.css stylesheet:

@media not [your media query] {
    a:hover {color:#999999; background:#111111;}
}

Or in a separate stylesheet within your page head:

<link rel="stylesheet" media="all" href="main.css">
<link rel="stylesheet" media="[your media query]" href="media.css">

<!-- Or put this in a separate file and link to it as above -->
<style media="not [your media query]">
a:hover {color:#999999; background:#111111;}
</style>

Alternatively you can undo the styles within your media.css stylesheet, but the downside to that is you must know what values to fall back to.

¹ _{Except in a desktop browser's developer tools, maybe.}