The value "inherit" is not inherited from the parent ": visited"

Question

Consider the following HTML:

<a href="http://google.com">foo <span class="bar">bar</span></a> 

and CSS:

 a { text-decoration:none; border-bottom-width: 0px; border-bottom-color: green; border-bottom-style: solid; } a:visited { color: red; border-bottom-color: yellow; } a:hover { color: gray; border-bottom-color: gray; } .bar { color: inherit; border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: inherit; } 

jsFiddle

---

What I expect:

The word "bar" should be colored red and have a yellow lower border (since it should inherit from a:visited , because http://www.google.com is a visited link).

What is actually going on:

The word bar is blue and its bottom border is green because it inherits from a , not a:visited .

However, it inherits from a:hover : it and its lower border change color to gray.

Question. How to make child <a> element inherit values ​​from state :visited ? . I will make decisions that include JS and jQuery. It is very important that I keep inherit as the value of color and border-bottom-color .

EDIT: This seems to be due to fixing a CSS history leak . However, I wonder if it is possible to achieve what I wanted.

Answer 1

Sorry, an additional label appears

This has been tested in FF22, IE9 + (IE8 for CSS2) and Chrome28.

The only way I found (and probably the only way it will work with all security features) to get the differentiation of the color you want based on the inherited control from states a and a:visited is an additional inscription in html

In particular, all the text outside the .bar needs to be wrapped in its own span (or two span elements if the text also follows the .bar ), and then the .bar text needs double wrapping paper. I assume this works because it uses the standard default inheritance of the color value for .bar (which also controls the default border-color value ), and therefore it allows you to pass the color state :visited to .bar .

Here's the code (I made new lines for the html display to make the extra text more visible):

UPDATED for unallocated control of the color of the lower border.

See the script.

HTML

 <a href="http://google.com"> <span>foo </span> <span class="bar"> <span>bar</span> </span> </a> 

CSS (CSS3 Version)

 a { text-decoration:none; color: green; /* controls unvisited border color */ border-bottom-width: 0px; border-bottom-style: solid; } a span:not(.bar) { color: blue; /* sets text color of unvisited links */ } a:visited { color: yellow; /*sets border color of visited links */ } a:visited span:not(.bar) { color: red; /* sets text color of visited links */ } a:hover span:nth-child(n) { /* nth-child(n) selects all, but is needed to override specificity of :not(.bar) in the previous selector. NOTE: because all the text must be wrapped in a child span, there is no need to define just the a:hover selector without the following span, unless other links will use this without a .bar nesting */ color: gray; /* sets text and border color when hovered */ /* eliminated unneeded border-color property */ } .bar { border-bottom-width: 1px; border-bottom-style: inherit; /* border-color uses color property of <a> in whatever state it is in */ } 

CSS2 (if IE8 browser support is required)

You should conditionally pass a different set of css for different states of the a element for IE8 (the base code a the same). This cannot be combined with the above, otherwise it will ruin the work required for Chrome.

See the script.

 a span { color: blue; } a:visited { color: yellow; } a:visited span { color: red; } a:visited span.bar { color: inherit; } a:hover span, a:hover span.bar { color: gray; } 

Answer 2

It works fine, just remove color: inherit; and border-bottom-color: inherit;

Inherit sets it back to the original, as it is part of <a> , so it has nothing to inherit

Working fiddle: http://jsfiddle.net/Hive7/5a8Pk/3/