Reputation: 125
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
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
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
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.
Upvotes: 0
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