Why does a CSS property inherit on one element but not another?

Inheritance is decided property by property, not applied to every style on an element. color is inherited by default, so when no value is specified on the child, it receives the parent’s computed color. border is not inherited by default, so the child does not automatically get the parent’s border. [S1]

For example:

.parent {
  color: darkblue;
  border: 2px solid;
}

A child inside .parent normally gets the parent’s computed color, but not its border. If you want the child to have a border, specify one for the child:

.child {
  border: 2px solid;
}

For any property you are unsure about, check its definition to see whether it inherits by default. [S1]

Check whether a value is specified for that property on the child. Inheritance supplies the parent’s computed value when no value is specified on the child. [S1]

For instance, the parent might set color: darkblue, while a rule for .warning sets color: red. If the child has the warning class, that child value can explain the difference. Also confirm that the child is actually inside the parent you expect in the element tree; inheritance follows the parent-child structure.

Compare the child with a sibling that looks right. Look at the rules that apply to each and compare their computed values for the same property. This helps distinguish a property that does not inherit by default from a child that has a value of its own.

Select the child in your browser’s developer tools and inspect the computed value for the property in question. Then inspect the parent’s computed value for that property too. The computed value is the value transferred from parent to child during inheritance. [S1]

Next, review the rules that apply to the child. If a value is specified on the child, investigate that rule. If no value is specified and the property normally inherits, compare the child’s computed value with the parent’s. If the property normally does not inherit, it is expected not to receive the parent’s value automatically. [S1]

Write down the element, property, parent value, child value, and relevant rule. This gives you a clear comparison to revisit as you investigate the styling.

Use this sequence:

1. Select the child that displays the unexpected result and confirm which parent contains it in the element tree.
2. Identify the exact property, such as color, border, or font-size.
3. Check the property’s definition to see whether it inherits by default. color is inherited; border is not. [S1]
4. Inspect the computed value on both parent and child. Note whether the values match. [S1]
5. Review the rules that apply to the child. If it should have a value different from the inherited value, specify that value for the child.

Example note to fill in:

Element: [child selector]
Property: [property name]
Parent computed value: [value]
Child computed value: [value]
Does property inherit by default? [yes/no]
Child rule that sets a value: [rule or none found]
Next change to try: [specific CSS edit]

The key is to check both the property’s default inheritance behavior and the value computed for the actual child. [S1]