CODEWITHSUNDEEP
htmlcssanchor
Jonathon
Jonathon

Reputation: 2675

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).

Upvotes: 64

Views: 83409

Answers (4)

Gus Bus
Gus Bus

Reputation: 659

Here is a handy snippet if you want to copy-paste the accepted solution into React

const UnstyledLink = ({ href, children }) => (
  <a
    href={href}
    style={{
      textDecoration: "inherit",
      color: "inherit",
      cursor: "auto",
    }}
  >
    {children}
  </a>
);

Upvotes: 2

Markandeya
Markandeya

Reputation: 537

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;
}

Upvotes: 12

Jeff Fischer
Jeff Fischer

Reputation: 2148

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.

Upvotes: 122

BoltClock
BoltClock

Reputation: 724502

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;
}

Upvotes: 6

Related Questions