HTML Anchor, Disable Style

I have some html anchor link code, and unlike the rest of document I want it to look like it is not a link.

Is there a simple way to disable the style change caused by wrapping text in a anchor tag without having to brute force it to be the same (ie, if I change the body font style I don't have to also change some other :link stuff).

Solution 1:

Setting color to black and text-decoration to explicitly none is a little more aggressive than worked for me.

I was looking for the CSS of the anchors to be "benign" and just blend into the existing CSS. Here's what I went with:

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

Then I just added the CSS nostyle class to the anchors that I wanted to be unformatted.

Solution 2:

I achieved this by creating a class .reset-a and targeting all of its' pseudo classes.

Targeting of all pseudo classes is important to make it flawless.

outline: 0 property removes the dotted border that surrounds a link when it is focused or active.

.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active  {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: auto;
}

Solution 3:

If you don't care about IE, you can attach :not(#exclude) (where exclude is the ID of the link in question) to your link styles:

a:link:not(#exclude), a:visited:not(#exclude) {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

Otherwise I don't think you can brute-force it the way you describe. You can either use an inline style instead (not recommended) or you can use a special class/ID assigned to that link, whose selector you'd group with body. For example, if you had these styles:

body {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

You can simply toss in a more specific selector, that'd match that link, onto the body rule:

body, #exclude {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}