sreginogemoh sreginogemoh - 1 month ago 5
CSS Question

CSS not inside tag

I have such html:

<div class=".entry">
<p></p> //text-indent here
<blockquote>
<p></p> //no text-indent here
</blockquote>
</div>


I want to ident only
<p>
tag inside
.entry
but not
<p>
inside
.entry blockquote


My CSS

.entry{
p{
margin: .85em auto;
line-height: 1.7;
text-indent: 1.5em;
}


}

Is there any way just to modify existing css may be jusing
not
selector somehow without introducing any new rules?

Answer

There are two ways to do that:

Use the child selector (>):

.entry > p {
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
}
<div class=".entry">
	<p>Outer paragraph</p> 
	<blockquote>
		<p>Inner paragraph</p>
	</blockquote>
</div>

Use descendant selector and reset <p> tag inside block quotes:

.entry p {
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
}
.entry blockquote p {
    margin: initial;
    line-height:initial;
    text-indent:initial;
}
<div class=".entry">
    <p>Outer paragraph</p> 
    <blockquote>
        <p>Inner paragraph</p>
    </blockquote>
</div>