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:

Something

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.