In this piece of code, why are both paragraphs blue?

.red p
color: red;


.blue p
color: blue;


<div class="blue">
<p> first </p>
<div class="red">
<p> second </p>
</div>
</div>

I assumed the first would have been blue and the second as red, but that isn't the case. Why are both paragraphs blue?

.red p

div.red p

.red > p

.blue p

3 Answers
3

Both paragraphs are blue due to the "C" in CSS - which stands for cascading. Review the MDN docs to see how CSS rules are applied and inherited.

In your case all of <p> elements are blue because the .blue p selector is the last rule in your CSS and it overrides the .red p selector.

<p>

.blue p

.red p

You can restructure your CSS like this to ensure that the <p> elements within the .red div are red.

<p>

.red

.blue p
color: blue;


.blue .red p
color: red;



As you know:

.blue p

.red p

Your <p> first </p> is within a blue class, so it matches the .blue p rule, and is rendered as blue.

<p> first </p>

.blue p

<div class="red"> is within both a red class and a blue class, so we have a dilemma. The way CSS resolves this is by using whichever rule appeared last. In this case the .blue p rule appears last, and the text is rendered as blue.

<div class="red">

.blue p

CSS fix

If p tags are always going to be an immediate child of your color classes, you could do the following. The > is a descendant selector that only matches immediate descendants.

>

.red > p
color: red;


.blue > p
color: blue;



CSS fix 2

You can also do as Tom suggested. The reason why it works is because CSS rules that are more specific will overwrite CSS rules that are less specific. Even though the blue rule comes second because div .red p has two classes, it is more specific than .blue p.

div .red p

.blue p

.red p,
.blue .red p
color: red;


.blue p,
.red .blue p
color: blue;



However, this only takes your problem one level deeper. The red class in the following HTML will still be rendered blue.

<div class="blue">
<div class="blue">
<p> first </p>

<div class="red">
<p> second </p>
</div>

</div>
</div>


HTML fix

This is the method I would suggest you use. You can simply move your classes to the p tags:

<div>
<p class="blue"> first </p>
<div>
<p class="red"> second </p>
</div>
</div>


Other items to watch out for

There are other ways a CSS rule can get overridden. I would suggest you research CSS specificity.

Because you have given blue color to the parent div. This should be your structure.

<div class="blue">
<p>first</p>
</div>
<div class="red">
<p>second</p>
</div>


CSS code will be :

.red
color: red;


.blue
color: blue;



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.