Semicolon after block declaration {} in css

1. div{
2.    border:1px solid black;
3.    height:500px;
4.    width:500px;
5.   };
6. p{
7.    border: 1px solid black;
8.   }
9. h1{
10.   border:1px solid black;
11.  }

According to the above code, the style will be applied only to the <div> and <h1> element and not to the <p> element because:

When the above code is interpreted/read by parser , line 5 will throw an error on line 5 since the closing curly brace is followed by a semicolon, which does not comply with CSS syntax , and an unknown syntax at any point stops the parser from reading the following code until it finds a closing curly braces, so line 6 and 7 will be skipped and it will find a closing braces at line 8 , and starts to read fresh code from line 9 , hence style will be applied to <h1> element.

You can find more information about CSS declaration and syntax on : https://drafts.csswg.org/css-syntax-3/#declaration-value-mode

When interpreting a list of declarations, unknown syntax at any point causes the parser to throw away whatever declaration it is currently building, and seek forward until it finds a semicolon (or the end of the block). It then starts fresh, trying to parse a declaration again.

Leave a Reply

Your email address will not be published.