Greg Gum Greg Gum - 3 months ago 6
CSS Question

How to unstyle a link

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>

Answer

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'

Comments