I was looking at the Angular 2 tutorial and this detail in the CSS caught my attention.
What does the dot in ".1em" means or do?
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
4 Answers
It's short-hand for 0.1em, ie. one tenth of an em. In other words, you are not limited to whole numbers (integers).
This isn't quite as useless as it seems. CSS minimizers are becoming common and would reduce this code to
.heroes li:hover {color:#607D8B;background-color:#DDD;left:.1em;}
The leading zero before .1 is just another byte that can go away.
-
1@Luke Briggs: Why? The question is quite clearly not about the class selector. It even says "value" in the title. Commented Jan 4, 2017 at 6:58
-
-
@BoltClock A CSS newbie asking this kind of question probably doesn't know the difference between a selector and a value. Considering how short this answer is, it seems worthwhile to add e.g. "
.heroesis a class selector" Commented Jan 4, 2017 at 7:03 -
@Luke Briggs: OK, that's a fair point. I just thought mentioning the class selector with no context seemed out of place. Commented Jan 4, 2017 at 8:11
it mean 0.1em but some people wrote it like .1em, it is short cut, like you used in Maths.
EM is a value relative to the font-size of the element.
.1em is 10% of 1em
With no css: 1em == 16px
If the font size changes, 1em = new font-size value.
The dot actually means 0. and CSS put the number after the dot as a decimal of 1. E.g. .1 = 0.1 or .3s = 0.3s
So, the two blocks below act the same:
div {
transition: all .3s;
}
div {
transition: all 0.3s;
}
Which results 300 milliseconds or 0.3 second.
-
The answer in general is correct, but you should nearly never transition "all" and use specific transitions instead, so I consider this as a "bad" example. stackoverflow.com/questions/8947441/…– ManuelCommented May 2, 2019 at 17:52
0.1em.