Specificity of Inherited CSS Properties

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.

Specificity order of CSS tag selectors with equal specificity

Specificity matters when two or more selectors are matching the same element – not the case here.

e.g.:
in the example below the more specific selector div#id.class won't win against h1 because they are referring to two distinct elements, so the color of h1 is determined by the first rule

h1{    color: blue;}
   div#id.class {    color: red;}

<html><head></head><body>    <div id="id" class="class">        <h1>This is the title</h1>    </div></body></html>

!important isn't working : style inherits from specific selector instead

If you inspect the page, you can see that the style font-size: 50pt !important; is being applied to the h2, just like it says in the stylesheet. But the h2 has no text, it only contains a span. The span can inherit text styles from its parent, but these inherited styles are not the highest specificity for the child elements that inherit them, even though you used !important.

CSS Specificity and Inheritance

The .container rule doesn't match the p element. So specificity is irrelevant here. Inheritance and specificity are separate concepts and the only time they interact is when more specific/less specific rules contain declarations with inherit. That is not the case here.

As far as the p element is concerned, only the * rule applies, and the * contains its own font-size declaration, and so the specified font size follows that declaration.

If the * rule didn't have its own font-size declaration, then the p element would inherit from .container.

If you want descendants of .container to take after its font size, you will need an additional .container * rule. Be very careful with the inherit keyword when it comes to relative values, though — you probably meant to keep all descendants the same size, so 1em or 100% is more appropriate here than inherit:

* {  font-size: 18px;}
.container {  font-size: 50%;}
.container * {  font-size: 1em;}

<div class="container">  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.  </p></div>

Pseudo-class inheritance understanding

CSS ascertains which selector(s) 'win(s)' following a set of order of precedence rules.

For example, from MDN:

Selector Types The following list of selector types increases by
specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).

So in the example given in the question:

<a href="#" id="id-selector">ok</a>
and CSS:

#id-selector {
  color: green;
}

a:any-link {
  color: red;
}

The color does not turn to red because the id selector takes precedence, even though the setting for a comes after in the 'cascade'.

Here's a snippet where the color does change (for this example on a hover):

#id-selector {
  color: green;
}

a#id-selector:hover {
  color: lime;
}

a:hover {
  color: red;
}
</style>

<a href="#" id="id-selector">ok</a>

Confusion between inheritance and specificity in CSS

Every CSS rule only applies to the subject of its selector.

For p { ... } the subject is all p elements

For #mainContent p { ... } the subject is all p elements which are inside the element with id mainContent.

if a p element is inside the element with id mainContent, the #mainContent p { ... } rule wins because it is a more specific rule.

The strong element is not the subject of either rule, so neither applies directly.

In the example, the strong element is the subject of the .green { ... } rule. So that is the rule that applies to that element.

So where does inheritance come in?

Inheritance of a property to an element can happen in one of two ways.

First, there can be an explicit rule whose subject is the element and the property setting is inherit. So strong { color:inherit; } will, if it is the highest priority rule with the color property in the cascade for a strong element, force the color of that element to be taken from that of its parent.

Alternatively, if there is no rule anywhere in the cascade for which a given strong element has a particular property defined, that element will take a default value. Some properties are defined as "inherited" and others are not. The color property is defined as inherited.

So, in this alternative case, only when that there is no rule whose subject is a given element and has a color property, does the color of that given element get inherited from the color of the containing element.

In your example. there are multiple rules for which the p element is the subject and the color element is defined, so no inheritance is effective on that.

CSS inheritance -- color property

Why would you expect a property specified on a parent to override one specified on a child?

Specificity refers to a way to prioritize rules selecting the same element. The specificity of a rule on a parent (.hero) has no relevance to the specificity of a rule on its children (a).

In this case, the default color on the a element is inherit. However, you explicitly specified a different color. No amount of specificity or !important on the parent can cause it to override an explicit color specified on the child.

Specificity / inheritance of color from asterisk / body?

I mean, if a "body" and "p" (and anything in the line of inheritance) doesn't have a background-color then it should use the asterisk.

The asterisk is a part of a selector that means "any element", not a special rule that means the properties within are applied as defaults when they have no inherited or specified value.

For example, another way to match body (but also head) would be:

html > * {
    …
}

because body is an element (*) that is a child of (>) an element named “html” (html).

So your body rule applies a background color to the body, but your * rule applies a background color to the p.

(Background color is also not an inherited property, but it doesn’t matter in this case. color would behave the same.)

Specificity of Inherited CSS Properties