CODEWITHSUNDEEP
htmlcss
CMig
CMig

Reputation: 69

Class selectors and its effects

I am new to CSS/HTML and I am not native English so I am having some problems understanding the relations between classes. I go with an example:

.classA .classB {
  color: red
}

.classC {
  color: blue
}
<div class="classA">
  <p class="classB classC">
    This text is red
  </p>
</div>

My question is: why it is not applying the style defined in .classC?

Upvotes: 1

Views: 54

Answers (4)

P.S.
P.S.

Reputation: 16394

It's because the rule with nested classes: .classA .classB {color: red} has more priority than simple .classC {color:blue}.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Because your first CSS rule has a higher specifity. (google that...)

In this particular case, simply said: "two classes beat one class"...

Upvotes: 0

Oro
Oro

Reputation: 1867

This is due to specificity.

In simple words: the first rule is more specific than the second one, because it describes a very specific hierarchy.

Upvotes: 2

t.niese
t.niese

Reputation: 40882

Because .classA .classB is more specific. Then .classC.

If you would write:

.classA .classC {color:blue}

Then it would be applied.

For more details you can take a look at MDN CSS Specificity

Upvotes: 3

Related Questions