Clarsen
Clarsen

Reputation: 125

paragraph tag not changing color

From the below code: why paragraph tag not showing green? Iam just practising CSS, so I came across with this doubt..

p .marked2{
color:green;
}

.marked p
{
color:purple;
}


<p class="marked2">This is a green paragraph.</p> //HERE NOT SHOWING GREEN
<div class="marked">
<p>This is a purple paragraph.</p> //HERE GETTING PURPLE COLOR
</div>


please clear me this..

Upvotes: 1

Views: 1878

Answers (5)

Sparky
Sparky

Reputation: 98718

Should be p.marked2. The way you have it now, it's looking for .marked2 elements inside of any p container.

Examples:

p.marked2 will target <p class="marked2">...</p> (every p element with class="marked2")

p .marked2 will target <p><span class="marked2">...</span></p> (any kind of element with class="marked2" as any descendent of <p>)

Upvotes: 2

mvmrocks
mvmrocks

Reputation: 85

So the problem your having is with the space; Example: p .marked2. All you need to do is delete the space like this; Example: p.marked2. It should work fine after that.

p.marked2{ color:green; }

p.marked{ color:purple; }

<p class="marked2">This is a green paragraph.</p> //HERE NOT SHOWING GREEN <div class="marked"> <p>This is a purple paragraph.</p> //HERE GETTING PURPLE COLOR </div>

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

Hey Clarsen it you should write like this :-

p.marked2 {
color:green;
}

.marked p {
color:purple;
}

And its working now as per your requirement....

Actually the you wrote p .marked2 this means when marked2 class will come with P tag not inside the P tag than the property will apply.

So you should write like this p.marked2 than marked2 class property will apply into your P tag as like the Demo.

DEMO

Upvotes: 0

bigdogc23
bigdogc23

Reputation: 1

I just got it work. All you have to do is take the space out of

    p .marked2{
    color:green;
    }




    p.marked2{
    color:green;
    }

That's it boss... you are good to go now...

Upvotes: 0

Seung-hyup Lee
Seung-hyup Lee

Reputation: 397

erase space

p.marked2 { 
    color:green; 
}

Upvotes: 0

Related Questions