Example of css inherit keyword

Question

What is an example of needing to use the inherit keyword in css?

Answer 1

http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit

Answer 2

Let's say we want all of our anchor text to be orange:

a { color: orange }

And we want all of our div text to be green:

div { color: green }

What if we want anchors within divs to also be green? Here, we can use inherit:

div > a { color: inherit }

The following HTML snippet might make this clearer:

<a href="#">I'm orange</a>
<div>I'm green!</div>
<div>I'm green and <a href="#">green</a>!</div>

Answer 3

a { color: yellow; }
strong a { color: inherit; }

In the above example, links are turned yellow unless they are inside <strong> ... </strong>, in which case they are the browser's default link color.

inherit is useful when you want to restore the browser's defaults or to return control of a particular characteristic to a higher level in the cascading tree. This ability is one of the reasons CSS has cascading in its name.