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

If we look at it step by step, CSS applies the brown color first to the whole div then comes into the div and finds the carrot class.

It applies the corresponding css, even if it is inside a block defined with another color.

Meaning of # selector having more priority over . selector:

If you use a div say:

<div class="carrot" id="first">Something</div>

Now CSS will give priority to the # selector and make it brown.

This is how CSS works..

Since carrot is a child doesnt have any other id, it has more priority over its parent with a # selector applied By default it would be inherited, but since u defined a class and changed its color, it takess the specified color instead of the parent color.

Answer 2

You are targeting specific elements with the class selectors hence the cascade is overwritten.

To get a better idea target the elements specifically.

#first .spinach {
  color: brown;
}

http://codepen.io/stenmuchow/pen/rVdMjR

Answer 3

You're also applying styles to the children of p#first (.carrot and .spinach). If you'd want everything on the first line to be brown you could to something like this:

#first,
#first strong{
    color: brown;
}

And that's just one way of going about it.

Answer 4

Like for like, an id is more specific than a class. So if you have an id and a class on the same element, the id will "win".

However, in your example the carrot and spinach classes are more specific because they are referring directly to the strong elements

If you think about it, id is more specific than class in css because there could be many elements with the same class, but only one with that id. That doesn't follow for child elements, and your code is a good example of why. When you style an element directly with a class, that's more specific than styling its ancestor by id.

Answer 5

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).