How can I exclude a specific element from inheriting CSS rules?

There are two ways you can do this.

First way is to use the :not() selector and give your link that you don’t want the styles applied to class:

a:not(.unstyled):hover {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

However, the :not() selector is not supported in IE8 or less, so the second option is to give your unstyled links a class, and override those properties for that link with that class:

a.unstyled:hover {
  background-color:none;
  color:#000
  text-decoration:none;
} 

Leave a Comment