Css rule application order

Question

This post (although it is based on a fact that causes me problems in my work) is more a philosophical question than a real question.

I came across this next mysterious case ...

This is not a problem, as I (I think) understand this phenomenon, how it is managed and what consequences it has.

I made the following example: http://jsfiddle.net/q7xAn/ as detailed as possible.

In this case, why (Ô gods, why) does the span have a yellow background?

I do not wonder which rule applies to it, but moreover: in whose name is the distorted (as opposed to what I always assumed) the last rule applies to the first one declared?

I mean that .red span and .lellow span are of the same complexity.

• Same length
• Each item at a given position has the same weight / importance.

They are equivalent in the natural order of the css selector.

Then what should prevail in the question of what application is applied is the rule that adheres to the closest to the stylized element. In the case of my example, the span should be in the style of ".red span" (the closest rule), and not ".lellow span" (this is also correct, but "redefined" to ".red span").

Are there any "historical", "political", "philosophical" or any other reasons for this behavior? Could there be some DOCTYPES (maybe?) That could make me watch the behavior? Can I send a request to w3c (why not?)? as? Any information, advice, other point of view is more than welcome!

Thanks to everyone in advance.

---

Edit note : 

I do not like to quote me, but in the commentary on aymeric, I thought about how to explain what was going on.

---

In general, what bothers me if I have, say, 7 color schemes (one for each color of the rainbow).

Also suppose that I am the creator of css from a team of (let them say) 10 people.

I want them (my team) to be able to insert blocks with a color scheme.

• In one case, the red block will contain a yellow and magenta block.
• In another (interesting) case, I would like to have 7 levels of nesting (red nested in orange, nested in yellow, nested in ...).

Now I have no way to use in advance.

The current CSS-related behavior would force me to update my css every time there is a new need for nesting, and as a result, with unfairly inflated rules. In terms of maintainability, this is an atrocity: "(

Answer 1

It is called specificity of css. And if two selectors correspond to a specific element, and they have the same weight , the selector that appears later applies to the element.

For more information read this .

Your .red span and .yellow span selectors both have a weight of 0,1,1 (the link I mentioned will explain in detail how to calculate the weight), and therefore the last rule applies.

Also read this article from W3, which will better explain the situation.

Hope all this makes sense :)

Answer 2

Here is an article (not quite recent, but explicit) that explains (if I didn’t understand your questions correctly) answers your opinion for.

For example, if you replace:

 .red span, .red{ background-color: #F00 } 

by:

 .yellow .red span, .red{ background-color: #F00 } 

Your background will be red.

Sincerely.