How to unstyle a link

Question

I have a link in a div:

  <div class="parentStyle">Click me:<a>foo</a></div>

How do I make the link NOT have any of it's own style, so that it takes on the appearance of the parent div?

The issue is that the parent div has a blue background with white letters. Because it is a link, it is styled like a link with blue letters so I end up with blue on blue.

The parent style is added with Javascript. So the parent is sometime styled with white letters, and sometimes not.

I need the link to keep the same look as the parent.

This is how it looks when selected:

<div class="k-top k-top"><span class="k-in k-state-selected">
        <a class="au-target" au-target-id="222" href="#/entity-router/entityDetails/2">
            Item 1</a>
    </span></div>

This is how it looks when it is not selected:

<div class="k-bot"><span class="k-in">
        <a class="au-target" au-target-id="234" href="#/entity-router/entityDetails/8">Item 2</a>
    </span></div>

Look at http://stackoverflow.com/questions/8919682/remove-all-styling-formatting-from-hyperlinks — osjo, Sep 02 '16 at 11:37
The parent style is added with javascript by a framework, so I can't really do that. — Greg Gum, Sep 02 '16 at 11:38
What do you mean the style is added by a framework and you can't change it? — Bojan Petkovski, Sep 02 '16 at 11:39
When the division is selected, then the style changes. The background becomes blue, and the letters white. When it is not selected, it is blue letters with white background. I need the link to be styled in the same way. — Greg Gum, Sep 02 '16 at 11:41
Well, when you change the parent styles change the a tag as well. I can't see any problem :) — Bojan Petkovski, Sep 02 '16 at 11:43
Create a class for styling the anchor tag and toggle that class when the parent's style changes. — Drew Kennedy, Sep 02 '16 at 11:43
Change the style of children as a callback function of parent change. — Ali Sheikhpour, Sep 02 '16 at 11:48
The code that changes the parent class is part of Kendo UI and I don't have access to that code. — Greg Gum, Sep 02 '16 at 11:49
@BojanPetkovski, I understand your answer now and it worked :) If you want to post as answer, I will accept. — Greg Gum, Sep 02 '16 at 11:56
@connexo, why do you think I made no attempt at the answer? I did in fact put quite some time on resolving this before posting. The use in question is for a TreeView, which turned out to be quite difficult to implement in html/js — Greg Gum, Feb 17 '18 at 23:45

score 8 · Answer 1 · answered Feb 17 '18 at 17:07

You can also use this to make the link no different from the parent element's text.

a {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;
}

<p>Some normal text and a <a href="https://stackoverflow.com/">link</a>.</p>

PS: You may need to use more styles depending on the CSS already used.

score 2 · Answer 2 · answered Sep 02 '16 at 11:38

2

Use css

div#parent a{
    color: #fff;
    text-decoration: none;
    }

answered Sep 02 '16 at 11:38

Abhay

314
1
2
11

score 0 · Answer 3 · answered Sep 02 '16 at 11:45

You can do this by using CSS.

Try this.

<html>
  <style>
    #parent{
      background:blue;
      }
    #parent a{
      color:#fff;
      text-decoration:none;
      }
    </style>
  <body>
    <div id="parent">Click me:<a href="http://stackoverflow.com/questions/39291385/how-to-unstyle-a-link">foo</a></div>
   </body>
  </html>

Hope it will help.

score 0 · Accepted Answer · edited Sep 02 '16 at 12:33

0

You can't unstyle an element, but you can apply a style only when a parent has a particular style like this:

parentStyle  a {
    color: #fff;
    background: blue;
    /*etc.*/
}

This style will apply only when it is a child of an element with a class of 'parentStyle'

edited Sep 02 '16 at 12:33

Greg Gum

33,478
39
162
233

answered Sep 02 '16 at 11:58

Bojan Petkovski

6,835
1
25
34

How to unstyle a link

4 Answers4