CSS rules order in the same style sheet

Question

A CSS rule overrides the rules that come before it in the style sheet. That is why the color displayed is red in the following example.

.two {
    background-color: blue;
}

.two {
    background-color: red;
}

<div class="one">
    Hello
    <div class="two"> World! </div>
</div>

Why in the next example the color is blue?

.one .two {
    background-color: blue;
}

.two {
    background-color: red;
}

<div class="one">
    Hello
    <div class="two"> World! </div>
</div>

Possible duplicate of [Css style priority](http://stackoverflow.com/questions/12088007/css-style-priority) — KittMedia, Feb 14 '16 at 12:04

score 0 · Accepted Answer · answered Feb 14 '16 at 12:06

0

thats because of

.one .two {
    background-color: blue;
}

It takes a higher precedence since it has 2 class selectors .one and .two so it's more specific as compared to the second with just .two

answered Feb 14 '16 at 12:06

Abhay Shukla

score 0 · Answer 2 · answered Feb 15 '16 at 06:33

It's happening because the code:

.one .two {
    background-color: blue;
}

targets the child of class - one, whereas

.two {
   background-color: red;
}

targets the class - two only which is parent.

Since the precedence of the style applied to child is higher than that of its parent, so it gets applied that style on the child element.

2 Answers2