Why in CSS does '!' in have the opposite meaning to its use in C-based languages?

Question

For example, in JavaScript, !important means 'not important'. In CSS, it means 'this is important'.

Are there languages other than CSS where an exclamation mark is used for affirmation rather than negation? Why was the '!' chosen in CSS?

EDIT

I don't know if it's a coincidence, but ! is the earliest non-system and non-whitespace character in the ASCII table (at #32). In terms of parsing, would that make it quicker?

Answer 1

! is an exclamation mark, so in itself it states that something is important. So I'd rather say it's odd that (other) programming languages use ! as a negator.

In HTML ! is part of a declaration (like <!-- --> to declare a comment and <!DOCTYPE ..> to declare a doc type), so it has another meaning there.

But then again, CSS is not a programming language at all..

And even amongst programming languages there are differences. And that makes sense., if they were all the same, it would be only one language. :D

Answer 2

! is more of an escape character than it is an operator. It is part of important, rather than a separate piece (e.g. in JavaScript I'd see this as ! and somevar, whereas in CSS I see this as !important). So, it isn't so much affirmation as you put it; it just so happens to be the character they chose to throw in front of the keyword important.

Also, in non-programming languages, ! is often used to draw attention to something, although it is often accompanied by some other sort of shape/symbol as well (e.g. ⚠), and this is likely the reason why ! was chosen. It may be helpful to see it as important! or ¡important! (!important is just easier to parse and type than the alternatives).

Edit: As noted by @mike-samuel: "The lexical scanner section of the CSS2.1 grammar spec lists !important as a single token ("!"({w}|{comment})*{I}{M}{P}{O}{R}{T}{A}{N}{T} {return IMPORTANT_SYM;}) although it does allow whitespace and comments between the ! and important."