0

<html>

<head>
  <style>
    p {
      color: red;
    };
    span {
      color: blue;
    }
  </style>
</head>

<body>
  <p> This is a paragraph </p>
  <span> This is a span </span>
</body>

</html>

Given the snippet above the color of the span is not changed to blue.

I would like to understand what is the reason of discarding the following declaration block?

I understand that those are not statements and there is no need of putting semicolon right after each declaration block but this kind of behavior is hidden and produces unexpected behavior.

Thanks in advance.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Tek
  • 1,178
  • 1
  • 12
  • 22

1 Answers1

0

The Semicolon ; in CSS is used for separating multiple declarations. And Not to terminate them. This is also, why you can leave out the last semicolon inside a block.

So an semicolon outside of the brackets is basically just invalid syntax.

This is why the CSS Parser stops and won't interpret the following declarations.

However, different browsers have their own CSS parser/Rendering engines which means the parser can behave differently. If you want to see why a parser behaves like that, you would need to check out the source code. A good start would be Gecko (Developed by Mozilla) since its Free and OpenSource.

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial

NullDev
  • 6,739
  • 4
  • 30
  • 54
  • Well If I duplicate the span declaration it will work. It only ignores the declaration explicitly after the semicolon – Tek Apr 20 '17 at 07:56