1

HTML:

     <section id="sec1">
      This section has <blockquote> this blockquote, which has <a href="">this link</a>
      </blockquote>
     </section>

     <p id="para1">
      This paragraph has  <blockquote> this blockquote, which has <a href="">this link</a>
      </blockquote>
     </p>

CSS:

section blockquote a {
  font-weight:bold;
  color:red;

}

p blockquote a {
  font-weight:bold;
  color:green;
}

CSS rule related to <section> works perfectly but same rule for <p> does not.

Here is codepen to check.

Any guide/reference to understand such behaviors?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
user1921636
  • 193
  • 9
  • 1
    You can't add a blockquote inside a p. blockquote is a flow content element, p only accepts phrasing content. You can check on MDN. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p . If you open your dev tool, you'll see that the p is autoclosing before the blockquote, meaning that your css rule won't target it anymore. – Amaury Hanser Jun 12 '20 at 07:16
  • 1
    Tons of useful information on SO : https://stackoverflow.com/questions/32170760/must-blockquotes-contain-paragraphs-or-must-paragraphs-contain-blockquotes – Alexandre Elshobokshy Jun 12 '20 at 07:18

0 Answers0