When thinking about CSS specificity, it can be tricky at first to understand how one selector beats another. It just occurred to me that semantic versioning could be a good way to explain it.
Semantic versioning is, of course, another slightly complex topic that someone beginning in the web dev world may or may not be familliar with, but bear with me here for a little bit.
The CSS spec for selector specificity states that each value is represented with an unspecified ”large base”, so for example 10 class name selectors will not make the number ”tick over” and equal 1 ID-selector, as it would in a base-10 system.
If we disregard the ”semantic” bit of semantic versioning, and stick to the major-minor-patch format, they work in the same way: version 1.9.9 does not tick over to 2.0.0 whenever a patch is released – the unspecified base means it would become 1.9.10 instead. In CSS specificity, higher version numbers simply beat lower ones.
I got the idea when reading Lea Verou’s post on Parsel – and the way the specificity is shown in the UI there (
1,5,1), which was familliar to me from other places as well. Maybe the ”version-number-syntax” of
1.5.1 could be an alternative way of teaching – at least maybe better than the
151 format used in the spec.