CODEWITHSUNDEEP
htmlcss
Sergino
Sergino

Reputation: 10818

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?

Upvotes: 2

Views: 346

Answers (2)

Cave Johnson
Cave Johnson

Reputation: 6778

There are two ways to do that:

1. Use the child selector (>) to style only the top level paragraph:

/* All paragraphs inherit these styles */
.entry p {
    margin: .85em auto;
    line-height: 1.7;
}
/* Only the top level paragraphs get text indent */
.entry > p {
    text-indent: 1.5em;
}
<div class="entry">
    <p>Outer paragraph section</p> 
    <blockquote>
        <p>Inner paragraph section</p>
    </blockquote>
</div>

2. Use the descendant selector to style all paragraphs and then override the inner paragraph style:

/* All paragraphs inherit these styles */
.entry p {
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
}
/* Override/Reset the text-indent property of inner paragraphs */
.entry blockquote p {
    text-indent:0;
}
<div class="entry">
    <p>Outer paragraph</p> 
    <blockquote>
        <p>Inner paragraph</p>
    </blockquote>
</div>

Upvotes: 1

bezierer
bezierer

Reputation: 388

You just need to be more specific with the elements you don't want indented. See my CSS below. Also, the CSS you posted would be valid SCSS but not normal CSS, just fyi.

  .entry blockquote p {
      text-indent: 0;
  }

Upvotes: 1

Related Questions