Mistake in Calculating Specificity for CSS

Question

I\'m trying to experiment with CSS.

Here\'s my code http://codepen.io/anon/pen/mJxrdE

Here\'s the html

Answer 1

CSS rules apply to the specific elements specified by the selectors. They do not somehow magically reach down and affect children. However, some properties (not all) are **inherited*, meaning that in the absence of any specific styling, the property value will be taken from the parent. color is one such inherited property.

Your brown rule applies to the #first element, but not to children. The children might be styled with the parent color, since color is an inherited property, but in this case, you've styled them directly, so no inheritance happens.

To clarify, the high specificity of the id selector does pretty much guarantee that the #first element will be brown (assuming there's no other rule with an !important, for example). But that high specificity has nothing to do with computing the result of the cascade on the children. The children find their own style, and inherit the parent style for color only if they have none of their own. To put it a different way, a high specificity on the parent selector does not make its downward inheritance "stronger" such that would override a setting on a child. Inheritance is neither strong, nor weak, nor important. It's just a behavior that takes place when a child property has the value inherit (by default, such as is the case with color, or explicitly).