Inherit CSS Properties

Which CSS properties are inherited?

Here is the list of all inheritable properies.
I'm working with W3C's information, so I'd guess it should be correct. But knowing web browsers (IE specifically), some of these might not be inheritable by all browsers:

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing

Inherit css property from another property of a different class

Five years later...

I know that css variables would be the way to go but since it is in experimental phase, it would not be a suitable for our project.

As it's 2021 (and no-one is using Internet Explorer 11 anymore, phew, and all the major browsers fully support ~~CSS Variables~~ CSS Custom Properties) so you can now use var().

If you simply want to only define 20px once to avoid repeating yourself in CSS, then set a custom-property on a common ancestor of both .class1 and .class2 elements: most people use html (or html:root or just :root) for this:

:root {
    --my-height: 20px;
}

.class1 {
    line-height: var(--my-height);
}

.class2 {
    height: var(--my-height);
}

Now, if you want .class2 elements to "inherit" their height: from any ancestor class1 elements instead of <html>, then this should work:

:root {
    --my-height: 50px; /* Default value for .class2 elements which are not descendants of .class1` */
}

.class1 {
    --my-height: 20px; /* Redefining the value */
    line-height: var(--my-height);
}

.class2 {
    height: var(--my-height);
}

...or if you want only .class2 descendants of .class1 to use the value:

:root {
}

.class1 {
    --my-height: 20px;
    line-height: var(--my-height);
}

.class1 .class2 {
    height: var(--my-height);
}

But you probably shouldn't be setting line-height anyway - doing-so is a sign that you're misusing display: inline; or vertical-align:;.

Specificity of inherited CSS properties

Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.

How do I set a value of `inherit` to a CSS custom property?

I did some thinking and this solution just hit me. I can use custom properties in conjunction with preprocessor mixins.

<style type="text/less">
  // NOTE: not syntactically valid CSS!
  .mx-border(@arg) {
    border: @arg;
  }
  figure {
    .mx-border(1px solid red);
    --foobar: 1px solid green;
  }
  figure > figcaption {
    .mx-border(var(--foobar));
  }
  figure > figcaption:hover {
    .mx-border(inherit);
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>This figcaption
    has a red border because the mixin
   sets the `border` property to `inherit`.</figcaption>
</figure>

This way, I can encapsulate all the dependent styles into the .mx-border() mixin. Doing this doesn’t take advantage of CSS custom properties, but it does alleviate the hassle of writing everything a second time for the :hover.

Essentially it is the same as writing border: inherit;, with the added ability of putting more styles into the mixin and not having to duplicate them.