Question

Is there a general approach to avoid a property to be not inherited in CSS.

Example:

body {color:blue; }
a:link {color:red; }
a.special:link {something;foo;bar;}

Using <a href="some" class="special">thing</a> the link's font color gets red as of a:link, but I would like it to be blue like at body.

Of course I could say rewriting it to

a.special:link {color:blue; something;foo;bar;}

But imagine there are many properties in body I want to inherit and not from a:link.

Was it helpful?

Solution

It's too simple that you can use the keyword inherit to specify some property to be inheritant from its parent. Note that not all properties can be inherited (inheritable). However color is one of inheritable properties, so you can do something like this:

a.special:link {
  color:inherit;
}

Demo.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top