Reason for the last line in CSS to not have a closing tag ";"?

Question

I've been working with CSS for sometime and I see that in a lot of tutorials and exercises the last line of a CSS tag has no ";" added to it. For example:

ul li:hover ul { 
    display: block
}

ul li ul {
      list-style: none;
      position: absolute;
      display: none;
      width: 104px;
      height: 100px;
      background-image: url(../_img/nav/dropdownbg.1.png);
      background-repeat: no-repeat;
      background-position: center;
      background-position: top
}

As you can see there are two examples. One with only one line and another with different commands in one tag. I would like to know why and which reason is there to do this?!! At school they didn;t tell us anything about this. I just close the last or only line with and ";" and it works perfectly.

So, which is the reason to do this? Is it more safe?

We use semi-colon when the styling properties is more then one. Semi-colon to separate one property from other. — sandeep, Aug 21 '12 at 13:17
It should be noted that CSS preprocessors will remove the trailing semicolon automatically. I *highly* recommend **keeping the trailing semicolon** to avoid forgetting it when adding another property to the end of a rule. — 0b10011, Aug 21 '12 at 13:19
SO if I undesrtand correctly, it really doesnt give you any advantage to add or not in the last line the delimeter ";". Its just a workflow... it doesnt affect for good or bad right?!?! — Daniel Ramirez-Escudero, Aug 21 '12 at 14:23

score 6 · Accepted Answer · edited May 23 '17 at 12:12

6

Šime Vidas' response to a related question is also valid here. The semicolon is a delimiter so the final property does not need to be delimited.

However, I would not recommend it, because in the scenario that you need to add another property to the end of a CSS rule it is far more likely that you'll miss out the need for a semicolon and your CSS will break.

edited May 23 '17 at 12:12

Community

1
1

answered Aug 21 '12 at 13:19

Mike B

12,768
20
83
109

score 3 · Answer 2 · answered Aug 21 '12 at 13:17

3

The specs say

ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;

which, as you can see does not imply terminating ; in curly braces.

answered Aug 21 '12 at 13:17

Michael Krelin - hacker

138,757
24
193
173

score 1 · Answer 3 · answered Aug 21 '12 at 13:15

1

The semi-colon is a delimiter: It separates things. The last item doesn't need to be separated from anything that follows.

answered Aug 21 '12 at 13:15

Steve Wellens

20,506
2
28
69

score 1 · Answer 4 · answered Aug 21 '12 at 13:16

The semi-colons separate the different lines, so if you have reached the last line, there is no need to put in a semi-colon, because you will see a brace which not only closes the line, but also closes the block.

I personally would prefer to put in a semi-colon anyway, but you're free to just leave it out.

Also check out; http://www.pagetoscreen.net/journal/item/the_missing_semi-colon/

score 0 · Answer 5 · answered Aug 21 '12 at 13:14

0

Since it is the last line in the rule there is no chance for ambiguity between it and the next rule because there is none. That's why it is ok to leave the last semi-colon off. Otherwise it offers no benefits or performance gains.

answered Aug 21 '12 at 13:14

John Conde

217,595
99
455
496

Reason for the last line in CSS to not have a closing tag ";"?

5 Answers5

Related