3

I have a paragraph that contains a <pre> element and some text, like the following:

<p class="par1">
     <pre>
           this is second paragraph
           ok
           ok
     </pre>
     These text are inside the paragraph must be RED
</p>

And I have used the following code to change the background color of the paragraph, but it doesn’t affect the paragraph and I don’t know why.

<style>
     .par1{
           background-color:red;
           color:green;
     }
</style>

Here’s the whole code:

<!doctype html>
<html>

<head>
  <title>Test id and class attribute</title>
  <style>
    .par1 {
      background-color: red;
      color: green;
    }
  </style>
</head>

<body>
  <div class="div1">
    Some text
    <h1>An important heading</h1>
    <p class="par1">
      <pre>
          this is second paragraph
          ok
          ok
      </pre>
      This text is inside the paragraph and it must be red.
    </p>
  </div>
</body>

</html>

I know that if I use the class of the div .div1, it works fine, but I want to know why the first one doesn’t work.

.div1{
    background-color:red;
    color:green;
}
dippas
  • 58,591
  • 15
  • 114
  • 126
Hamreen Ahmad
  • 522
  • 5
  • 21

2 Answers2

4

As per W3c specs say, you can't have a pre inside a p

4.4.1 The p element

Content model:

Phrasing content.

Where Phrasing Content is:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr

you can use instead a span and setting it as display:block which will make it a block level element

.par1 {
  background-color: red;
  color: green;
  display: block
}
<div class="div1">
  Some text
  <h1>An important heading</h1>
  <span class="par1">
    <pre>
      this is second paragraph
       ok
       ok
    </pre>
    These text are inside the paragraph must be RED
  </span>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
1

as @dippas said, it's about the <pre>-tag inside a <p>-tag

<p>-tags can not contain block-level elements. as <pre> is a block-level element, browsers seem to close the <p>-tag, before the <pre>-tag opens (see your browser inspector). thus the styles on <p> could not be inherited by the <pre>-tag

for a good discussion with helpful hints, see:

<pre> tag making browsers close paragraphs

EDIT:

In the W3C specs, it is said that "A paragraph is typically a run of phrasing content (...)".

https://www.w3.org/TR/html5/dom.html#paragraphs

Community
  • 1
  • 1
sasha
  • 779
  • 10
  • 21
  • can we say "a block level elements cannot contain another block level element"? – Hamreen Ahmad Jul 08 '16 at 11:25
  • no, not really.
    s contain
    – sasha Jul 08 '16 at 11:31