Paul Paul - 5 months ago 17
CSS Question

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?

Answer

You can't "delete" CSS rules.1 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.


1 Except in a desktop browser's developer tools, maybe.

Comments