Search code examples
htmlcsscss-selectorspre

CSS properties don’t work for paragraphs with pre elements inside

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;
}
Solution

  • 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>