Remove ALL styling/formatting from hyperlinks

Question

I'm creating a navigation menu with words with different colors (href links). I would like the color NOT to change on any state (hover, visited etc).

I know how to set the the colors for the different states, but I would like to know the code to just leave the text color (and any other styling/formatting) as it is.

Any Suggestions?

score 406 · Accepted Answer · edited May 01 '18 at 08:51

406

You can simply define a style for links, which would override a:hover, a:visited etc.:

a {
  color: blue;
  text-decoration: none; /* no underline */
}

You can also use the inherit value if you want to use attributes from parent styles instead:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

edited May 01 '18 at 08:51

Vadim Ovchinnikov

13,327
5
62
90

answered Jan 19 '12 at 00:55

Frxstrem

38,761
9
79
119

7

The important part is the `inherit` keyword. It doesn't have 100% support unfortunately. – david Jan 19 '12 at 00:59
2

`initial` is also helpful when you want to css reset to the default style. This is well explained here [link](http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value) – Rbijker.com Aug 29 '13 at 16:36
@david, Does it still stand? Does `inherit` not work only in anciet browsers and Internet Explorer or there are difficulties in popular browsers (Chrome, Firefox) too? – parsecer Oct 16 '16 at 01:10
1

Check out [unset](https://developer.mozilla.org/en-US/docs/Web/CSS/unset) as well. >> 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. – JackMorrissey Feb 28 '19 at 19:51

Alan Kersaudy · Answer 2 · 2023-04-17T11:04:46.457

34

The property-value pair:

a {
    all: unset;
}

seems cleaner in my opinion and has the advantage to work with all the selectors, e.g.:

a, button /* &c... */ {
    all: unset;
}

Note that this will also remove the property {cursor: pointer;} from your link. It might or might not be what you are looking for. Simply add this property in the second case.

To learn more about the all shorthand, checkout this page: https://developer.mozilla.org/en-US/docs/Web/CSS/all
As Emi said, don't forget to check for compatibility: https://caniuse.com/css-all

edited Apr 17 '23 at 11:04

answered Nov 13 '21 at 14:33

Alan Kersaudy

739
7
15

Genius! This one works for underline and link color on visited...etc. The best answer IMO – TOPKAT Mar 23 '22 at 08:51
1

I'd recommend checking browser compatibility for that approach: https://caniuse.com/css-all – Emi Aug 29 '22 at 11:41
1

But this will remove the special mouse hover icon. And it will leave the hover style. – Garret Wilson Apr 14 '23 at 14:19

score 6 · Answer 3 · edited Nov 10 '21 at 08:43

6

As Chris said before me, just an a should override. For example:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

In this instance the .nav a would always be green, the :hover wouldn't apply to it.

If there's some other rule affecting it, you COULD use !important, but you shouldn't. It's a bad habit to fall into.

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

Then it'll always be green, irrelevant of any other rule.

edited Nov 10 '21 at 08:43

tolik518

119
2
14

answered Jan 19 '12 at 00:55

SpoonNZ

3,780
1
20
25

This isn't what he asked. Re-read the question. He already knows this. – david Jan 19 '12 at 01:01
1

@david I have re-read, pretty sure that's what he asked. This code will allow him to set a style for `a` which will prevent any changes on `:hover` (or `:visited` etc). How about instead of being a dick and rubbishing all three answers you suggest an actual solution? – SpoonNZ Jan 19 '12 at 19:44
Thanks for the help. But what if the link is like this. 2 words in 2 colors, but it's just 1 link: unique(in pink) sales(in black) And they should stay that color in any state. I coded it inline this way... unique sales But there must be a cleaner. (there where many links like this in the code) Any suggestions? – Rbijker.com Mar 07 '12 at 19:31
I guess that's why classes were invented. @Rbijker.com – Alan Kersaudy Sep 30 '22 at 10:11

score 0 · Answer 4 · answered Jan 19 '12 at 00:51

0

You can just use an a selector in your stylesheet to define all states of an anchor/hyperlink. For example:

a {
    color: blue;
}

Would override all link styles and make all the states the colour blue.

answered Jan 19 '12 at 00:51

Chris

3,729
22
30

1

This isn't what he asked. Re-read the question. He already knows this. – david Jan 19 '12 at 01:02

score -1 · Answer 5 · answered Jan 19 '12 at 00:50

-1

if you state a.redLink{color:red;} then to keep this on hover and such add a.redLink:hover{color:red;} This will make sure no other hover states will change the color of your links

answered Jan 19 '12 at 00:50

Danferth

1,841
5
19
25

Remove ALL styling/formatting from hyperlinks

5 Answers5

Linked