Nesting ≪P≫ Won't Work While Nesting ≪Div≫ Will

Nesting p won't work while nesting div will?

Because a paragraph is a paragraph .. and that's how HTML is defined (and HTML is not XML).

Any <p> (or other block-level element) will implicitly close any open <p>.

Per 9.3.1 Paragraphs: the P element of the HTML 4.01 specification:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Note that this is how the HTML is parsed and that even a <div> would have implicitly closed the paragraph!

However, a <span> with display:block; would not have closed the <p> as a <span> is not a block-level element.

That is, the CSS is irrelevant at this stage of the HTML processing and the CSS is irrelevant to the DOM/parser when determining if an element is a block-level element or not. Consider the case when CSS is applied dynamically or through a not-yet-loaded-stylesheet: the applied CSS does not alter the DOM.

While the HTML5 (working-draft) specification does not include the language above in the HTML4 specification, it does go on to define a paragraph as a container for phasing content and further has a section on paragraphs.

The accepted answer to List of HTML5 elements that can be nested inside P element? says that <p> elements cannot nest in HTML5. The key phrase from the documentation is: "Runs of phrasing content [which does not include <p> elements] form paragraphs". Furthermore, HTML5, trying to be backwards-compatible in many aspects, has a rationale on "Restrictions on content models and on attribute values":

Certain elements are parsed in somewhat eccentric ways (typically for historical reasons), and their content model restrictions are intended to avoid exposing the author to these issues.

This behavior is referenced from a HTML5 WG wiki entry on flow content:

HTML5's restrictions on nesting of p elements and on what p elements may contain, are due to, quote: “peculiarities of the parser” that causes p to be auto-closed ..

Why doesn't my nested paragraph respect font-size styles?

Simple answer is you can't nest p tags, if you open the console and inspect you will see the 2 p tags are siblings instead of parent/child, therefore there is no inheritance.

See this answer for more details Nesting <p> won't work while nesting <div> will?

Nested v-for loops using p tag doesn't work in Vue.js

When i change the outer p to div it works fine as below :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    user: [{
      name: 'test2name',
      session: [{
          name: 'sessionname'
        },
        {
          name: 'sessionname2'
        }
      ]
    }]
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <div v-for="entry in user">
    {{entry.name}}
    <p v-for="session_entry in entry.session">
      {{session_entry.name}}
    </p>
  </div>
</div>

jQuery selector of nested p

If you going and check the rendered html in the debugging tool, you gonna find that, none of your <p> element,that you were nesting is not nested anymore. They are rendered as a separate element. So I the html renders and you going to manipulate the DOM with $('p p') or $('p>p'), there is no element existing with the above specified syntax of expression or DOM manipulation.

<div style="border:1px solid;">
  <p>The first paragraph in  div.</p>
  <p>The second paragraph in div (and the 2nd child in this div).</p>
  <p>
    <span>Span within p (WILL BE fount as "p > span")</span>
    </p><p>P within p (1).</p> 
    <span>Span within p (will NOT be fount as "p > span")</span>
    <p>P within p (2).</p>
  <p></p>
</div>
<p>
    <span>Span within p (WILL BE fount as "p > span")</span>
    </p><p>P within p (1).</p> 
    <span>Span within p (will NOT be fount as "p > span")</span>

As mentioned by @Ish and @j08691 that <p> tag cannot be nested , you are able to see clearly in your browser with the help of debugging tool of the browser.
For More reffernce, Please check another SO answer on it

p tag does not show up in nested div layer

So, sometime ago, I actually solved this by changing the order of the div layers in my index.html file. Instead of including <div id = "chart"> under <div id = "wrapper">, I moved <div id = "chart" outside of the <div id="wrapper"> layer.

<body>

 <div id="container">

  <div id="header"></div>

  <div id="wrapper">
   <div id="questions"></div>
   <div id="tables"></div>
  </div>

  <div id="chart"></div>

  <script src = "chart2.js"></script>
  <script src = "tables.js"></script>

 </div>


</body>

Nesting with SASS does not seem to work for me?

Answer

So after a good night sleep i found the asnwer,
you guys were all right in some way and it encouraged me to look somewhere else.

The problem was that i was linking the wrong stylesheet, that i found out only after looking at the Network requests in the DevTools.

There i saw that it was loading the style.scss file, while the browser cannot read this of course. it should have been the CSS file.

So i changed the folder and file from:

<link rel="stylesheet" href="../stylesheets/scss/style.scss">

To:

<link rel="stylesheet" href="../stylesheets/css/style.css">

Why p:first-child pseudo class does not apply to p element's first-child

<p> tags cannot be nested in HTML. This is because they only exist to format text as.. well.. a paragraph, you can read more about it here.

In short, any open <p> tag simply closes whatever the last <p> to be opened was, regardless of syntax.

Nested div borders won't stay inside the main div when input:checked

As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for

.card {  position: relative;  width: 300px;  height: 400px;  background: #262626;  overflow: hidden;}
input,.toggle {  position: absolute;  width: 50px;  height: 50px;  bottom: 20px;  right: 20px;  border: none;  outline: none;  z-index: 10;}
input {  opacity: 0;}
.toggle {  pointer-events: none;  border-radius: 50%;  background: #fff;  transition: 0.5s;  text-align: center;  font-size: 36px;  line-height: 40px;  box-shadow: 0 0 0 0px #9c27b0;  overflow: hidden;}
input:checked~.toggle {  box-shadow: 0 0 0 300px #9c27b0;  transform: rotate(500);}

<div class="card">  <input type="checkbox" name="">  <div class="toggle">+</div>  <div class="imgBox"> </div>  <div class="content"> </div>  <div class="details">
    <h2>A quick check on CSS</h2>    <p> Just doing a quick test on CSS</p>

  </div></div>

Issue with styling paragraph tags in nested components

in the css I indicated where I changed

.parentPar > p{ /* this it */
    color: green;
    font-size: 30px;
    font-weight: 600;
}

/*div.app p{
    color: lime;
    font-size: 25px;
    font-weight: 550;
}*/

.hd{
    color: red;
    font-size: 20px;
    font-weight: 500;
}

p{
    color: blue;
    font-size: 10px;
    font-weight: 400;
}

<div class="parentPar">
    <p>Parent Paragraph 1</p>
    <div id="app">
      <p class="hd">SubHeader paragraph</p>
      <p>Normal paragraph</p>
    </div>
</div>

CSS to make html P render equal to DIV, SPAN or B

You cannot nest <p> elements, as they cannot include block level elements (which <p> is). See the HTML spec:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

What you're seeing is the browser attempting to resolve this illegal HTML, by closing the initial <p> when it encounters a nested <p>, leading to some...strange effects (probably depending on browser.)

Nesting ≪P≫ Won't Work While Nesting ≪Div≫ Will